当前位置:首页 > 前端

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

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

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



分享给朋友:

相关文章

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

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

Ckeditor踩坑记

说实话,用了很多富文本编辑器,最精益求精的还是Ckeditor! 曾经一度依赖于百度的Ueditor,因为其简单,方便;特别是在图片上传、H5上传、远程文件下载支持这三个方面,表现尤为突出!…

字体图标的妙用

什么是字体图标对于前端的小伙伴来说,字体应该是再熟悉不过的东西了,对于文字我们可以通过css指定文字对应的字体,字号大小,颜色。得益于css3,我们还可以在css中引入服务端字体来实现自定义字体。而字…

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

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

微信小程序强制热更新

微信小程序强制热更新

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

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

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

发表评论

访客

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