CSS3单边阴影box-shadow的设置

box-shadow设置阴影效果

box-shadow: h-shadow,v-shadow,blur,spread,color,inset;

h-shadow:必需的。水平阴影的位置。允许负值
v-shadow:必需的。垂直阴影的位置。允许负值
blur:可选。模糊距离
spread:可选。阴影的大小
color:可选。阴影的颜色。
inset可选。默认外侧阴影,写入inset后默认内侧阴影。

设置左边阴影:
box-shadow:10px 0px 8px -8px darkgrey;
设置右边阴影
box-shadow:-6px 0px 5px -5px darkgrey;
设置上方阴影:
box-shadow:0px 6px 5px -5px darkgrey;
设置下方阴影:
box-shadow:0px -8px 5px -5px darkgrey;

思路:第三参数和第四参数相互抵消,可以让其他边框效果隐藏。
然后再移动单边的距离,大于其参数就可以设置单边效果。

以box-shadow:-6px 0px 5px -5px darkgrey举例
-6px的绝对值大于5px,则可以设置右边框.

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容