盒子阴影

时松

于 2019-07-31 18:20:38 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

分类专栏：基础文章标签：盒子阴影

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/97942327

基础专栏收录该内容

79 篇文章

订阅专栏

本文深入讲解CSS中的Box Shadow属性，包括其语法格式、各参数的意义及用法，如水平和垂直阴影位置、模糊距离、阴影尺寸、阴影颜色及内外阴影的区别。通过实例代码展示如何设置复杂的阴影效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法格式：
box-shadow：水平位置垂直位置模糊距离阴影尺寸（影子大小）阴影颜色内/外阴影；
1.前两个属性必须写，其余可省略
2.外阴影（outset）但是不能写默认想要内阴影 inset

值	描述
h-shadow	必须，水平阴影的位置，允许负值
v-shadow	必须。垂直阴影位置，允许负值
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色
inset	可选，将外部阴影（outset）改为内部阴影

div {
		width: 200px;
		height: 200px;
		border: 10px solid #000;
		box-shadow: 5px 5px 3px 4px rgba(0,0,0,0.4) inset; 
		/*box-shadow：水平位置  垂直位置  模糊距离  阴影尺寸（影子大小）  阴影颜色  	内/外阴影；*/
	}