css 给圆设置阴影效果,box-show属性使用体会

作者:码砖小丸子
时间:2018/7/7
标题:css 阴影效果 box-show体会

因为前端ui提供的界面中涉及到大量的阴影效果,因此涉及到了对ui的研究
box-show中涉及的属性有
css 给圆设置阴影效果,box-show属性使用体会
如果要涉及到四边全附上阴影效果可以用如下方式
css 给圆设置阴影效果,box-show属性使用体会
为了制作如下的阴影效果
css 给圆设置阴影效果,box-show属性使用体会
先设置了长方形背景,让其顶边携带阴影进行如下操作
css 给圆设置阴影效果,box-show属性使用体会

css 给圆设置阴影效果,box-show属性使用体会
同时给square添加伪类::after
css 给圆设置阴影效果,box-show属性使用体会
将::after设置成一个圆,然后设置背景为白色,并让其居中,为检测圆的阴影效果给其设置了四边的阴影效果,如代码中的box-show所示。
效果如下
css 给圆设置阴影效果,box-show属性使用体会
为达到基本效果
css 给圆设置阴影效果,box-show属性使用体会
最终通过以上方式来达到想要的效果
先设置左边框的灰色阴影,同时降低灰色系数,然后进行旋转达到想要的效果
css 给圆设置阴影效果,box-show属性使用体会

注:以上为是在微信小程序中开发,因此,单位没有用px用的是wxss中的rpx。

参考博客:https://blog.****.net/freshlover/article/details/7610269