【CSS学习总结】边框阴影：box-shadow

最新推荐文章于 2024-09-28 17:34:19 发布

夏末_前端有意思

最新推荐文章于 2024-09-28 17:34:19 发布

阅读量2.1k

点赞数 4

分类专栏： CSS 文章标签： CSS box-shadow

本文链接：https://blog.csdn.net/xiamocsdn/article/details/99584834

版权

本文详细介绍了CSS3的box-shadow属性，包括其定义、语法及各个参数的意义，通过实例展示了如何创建内外阴影、调整阴影模糊半径、大小和颜色。文章还分享了一些使用box-shadow进行创意实践的技巧，如通过:hover伪元素和transition、transform属性实现鼠标悬停时阴影动态变化的效果。

摘要由CSDN通过智能技术生成

今天在写一个点亮灯泡的小项目的时候，用到了box-shadow属性。感觉这个属性挺有意思的，索性专门整理一下。

一. box-shadow的定义和语法

二. box-shadow属性值的详细解析

一. box-shadow的定义和语法

定义：box-shadow是css3新增的一个属性。在W3School里，定义box-shadow是向框添加一个或者多个阴影的属性。
语法：box-shadow: h-shadow v-shadow blur spread color inset.

h-shadow: 阴影的水平位置
v-shadow：阴影的垂直位置
blur：阴影的模糊半径
spread：阴影的半径
color：阴影的颜色
inset：将外部阴影改成内部阴影【outset反过来】

根据box-shadow的定义，我们可以为一个框设置一个阴影，也可以设置多个阴影。

当我们需要设置多个阴影时，中间需要将每个阴影用逗号隔开。

举个例子：

/*html代码*/
<div class="test"></div>


/*对应的css代码*/
.test{
	width: 100px;
	height: 100px;
	background: yellow;
	margin: 100px auto;
	border-radius: 50%;
	box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5), -10px 10px 10px 10px rgba(255,255,255,0.5)
}

这里我们用border-radius属性设置了一个圆形，并且为这个圆形添加了一个浅黄色阴影和一个白色的阴影。

以第一个阴影：box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5)为例：

这段代码表示阴影的水平位置为右移10px；

垂直位置为下移10px；

第三个10px代表阴影的模糊程度blur，我们也将它设置成20px；

第四个10px是阴影半径的意思；最后一个规定了阴影的颜色为rgba(255,255,0,0.5)。

也就是说，我们为class为test的div元素添加了一个偏离框，并且向右距离为10px、向下距离为10px、模糊半径为10px、阴影半径为10px的浅黄色的阴影。

根据上面的CSS代码，我们看一下同时设置了两个阴影的效果：