1. 首页
  2. 前端

CSS 盒子阴影效果

1、盒子定义一个3px宽高阴影

 box-shadow: 3px 3px  rgba(100, 100, 100, 1) ;

CSS 盒子阴影效果

2、盒子阴影半透明化

 box-shadow: 3px 3px rgba(100, 100, 100, 0.5) ;

CSS 盒子阴影效果

3、盒子阴影模糊化

 box-shadow: 3px 3px 3px rgba(100, 100, 100, 0.5) ;

CSS 盒子阴影效果

4、盒子四边都有阴影

 box-shadow:  0 0 3px rgba(100, 100, 100, 0.5) ;

CSS 盒子阴影效果

附不同阴影位置的写法:

左:- px   右:+ px

上:- px   下:+ px

左右上下

例如阴影在左下角:

box-shadow:  -3px 3px ;

CSS 盒子阴影效果

END

原创文章,作者:Tingwep,如若转载,请注明出处:https://tingwep.cn/web/id=272

发表评论

邮箱地址不会被公开。