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

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

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

要实现阴影使用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...

IE11,Chrome粘贴图片上传的JS实现方法和逻辑

核心代码如下://处理IE11,Chrome粘贴图片上传 function pasteUpload() { var file = null;...

npm如何使用国内镜像源?

通过命令配置1. 命令淘宝源npm config set registry https://registry.npmmirror.com腾讯源npm ...

uniapp无缝滚动核心代码

1、页面代码核心代码<scroll-view class="scoll-warp">     <view&nb...

npm 更新模块

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

微信小程序强制热更新

微信小程序强制热更新

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

发表评论

访客

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