当前位置:首页 > 前端

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

Z先生2年前 (2024-06-04)前端959

要实现阴影使用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);
}



分享给朋友:

相关文章

npm删除掉所有模块并重新安装的方法

1、删除目录:node_modules2、运行清理命令npm cache clean -f3、安装npm install…

微信小程序强制热更新

微信小程序强制热更新

微信小程序分为冷启动和热启动,在更新后,一般需要一个周期,用户端才会重新更新。官方从小程序基础库版本1.9.90开始支持强制更新异步更新 + 强制更新方案介绍从基础库 1.9.90 开始,我们提供了&…

写给即将寿终正寝的Flash,即html5 Flash解决方案

写给即将寿终正寝的Flash,即html5 Flash解决方案

Adobe的Flash将于2020年12月31日正式终止。Adobe公司最近宣布,将会正式宣布停止对Flash的支持,这也变相宣布了Flash的死亡,Flash Player将于2020年12月31日…

js中获取当前url路径

网上转的,用的时候整理// 返回 web 主机的域名,如:http://127.0.0.1:8080/testdemo/test.html?id=1&name=t…

记vue/uniapp本地调试以及部署代理服务器设置哪些事

接触vue差不多也一年有余,很多概念性的东西都不懂,逐步已经习惯了npm来安装,之前其他同事做的一些项目,npm自己拿过来也踩了很多坑,比如换个环境再npm就跑不起来了等等之类的,遇到最多的就是scs…

VUE/UNIAPP事件传参

第一种方式使用data<view @click="handleClick" data-info="大家好">点击按钮</v…

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。