当前位置:首页 > 前端

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

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

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



分享给朋友:

相关文章

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

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

VUE打包时from UglifyJs Unexpected token: punc (()错误解决方案

归其原因是因为缺少ES2015的语法解析。因此进行如下2步操作即可解决问题:1、安装babel-preset-es2015npm install babel-preset-es20…

MUMU模拟器调试APP注意事项

MUMU模拟器默认ADB端口7555,所以要么修改MUMU默认端口,要么修改IDE编辑器链接端口为7555。做好这个MARK!…

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…

发表评论

访客

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