当前位置:首页 > 前端 > 正文内容

CSS均匀四周阴影(光晕效果)

Z先生1年前 (2024-06-04)前端661

要实现阴影使用box-shadow属性,CSS语法

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow: 必需参数,可以为0。以元素左上角为原点,在X轴上的偏移量,可以设置正负值,代表在当前轴上正负方向的偏移量

v-shadow: 必需参数,可以为0。以元素左上角为原点,在Y轴上的偏移量,可以设置正负值,代表在当前轴上正负方向的偏移量

blur:可选参数,阴影模糊的距离,这个参数默认值为0,这时阴影的边缘部分非常尖锐

spread:可选参数,这个参数设置元素四个方向上阴影的尺寸

color:可选,阴影的颜色

inset:可选,将外部阴影(outset)改为内部阴影


实现思路,box-shadow可以设置四组阴影样式,每组H,V正负相抵,然后再加上模糊距离即可。

完整代码:

.list-card {
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.1),
    2px -2px 5px rgba(0, 0, 0, 0.1),
    -2px 2px 5px rgba(0, 0, 0, 0.1),
    -2px -2px 5px rgba(0, 0, 0, 0.1);
}



分享给朋友:
返回列表

上一篇:antdv中a-input组件设置只读

没有最新的文章了...

相关文章

小程序二维码传参处理&UNIAPP H5传参兼容处理

首先小程序生成二维码,我这里调用的接口是:getUnlimited,我传递的参数是:invite=10001接着就是小程序中处理,如果直接扫二维码在App.vue的onLaunch中,使用decode...

【原创】api接口模拟器(NodeJS版)

最近遇到一个项目,内网的APP,后端数据和前段开发属于异地,没法直接做接口数据测试。因此用NodeJs简单写了个API模拟器,只要将响应的数据放在对应目录下json.json文件中即可。请求地址全静态...

ColorUI色系

ColorUI色系

                          ...

npm 更新模块

npm update只能按照package.json中标注的版本号进行更新,升级后不会修改package.json中的版本号,需要自己手动修改,比较麻烦。npm-check-updates 升级插件升...

uniapp开发小程序,小程序二维传参与H5、分享页面参数兼容的处理方案。

首先小程序获取二维码接口有三个,2个限制数量,一个不限制数量,但是限制生成频率(5000次/分钟)和参数长度(32位),我使用的是不限数量的接口:getUnlimited,传递的参数为:invite=...

微信html链接小程序原始写法(暂未测试)

微信html链接小程序原始写法(暂未测试)

无意间发现了微信的这个链接,这几天比较忙,暂时还没有测试,等空了再测试一下。<a class="weapp_text_link"   &nbs...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。
请先 登录 再评论,若不是会员请先 注册