【CSS *】box-shadow理解
2021-03-04 本文已影响0人
前端菜篮子
shadow: 影子
box-shadow：盒模型的影子
在没有偏移没有放大的情况下：影子在原形下，大小同原形，不可见
box-shadow:inset offset-x offset-y blur-radius spread-radius color,....;
-
box-shadow是css3的一个新属性，用来实现阴影效果，阴影分为内阴影和外阴影两个效果，有inset则为内阴影，没有insert则为外阴影，默认为外阴影。【可以通过逗号添加多个阴影效果】 -
offset-x：横向阴影的偏移量，正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur-radius值会有模糊效果。 -
offset-y：纵向阴影的偏移量，值同offset-x。正值阴影在下边，负值阴影在上边 -
blur-radius：阴影的模糊程度，值越大，阴影越模糊。 -
spread-radius：阴影的扩大缩小，正值时，阴影扩大；负值时，阴影缩小，默认为0，和盒子同样大。
那我们来看下外阴影的效果
外阴影
代码如下：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>box-shadow属性学习</title>
<style>
div {
width: 100px;
height: 100px;
background: yellow;
display: inline-block;
margin: 30px;
}
.div0 {
box-shadow:10px 0 0 0 rgba(0,0,0,0.5)
}
.div1 {
box-shadow:10px 0 10px 0 rgba(0,0,0,0.5)
}
.div2 {
box-shadow:-10px 0 10px 0 rgba(0,0,0,0.5)
}
.div3 {
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.5)
}
.div4 {
box-shadow:0 -10px 10px 0 rgba(0,0,0,0.5)
}
.div5 {
box-shadow:10px 0 10px 10px rgba(0,0,0,0.5)
}
</style>
</head>
<body>
<div class="div0">
</div>
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
<div class="div5">
</div>
</body>
</html>
看个简单的内阴影效果
就用上面最后一个div,加上inset看看
内阴影
.div5 {
box-shadow:inset 10px 0 10px 10px rgba(0,0,0,0.5)
}
颜色大小调不好，加了内阴影反而会很丑，哈哈哈
再看看多个阴影叠加
阴影叠加
.div7 {
box-shadow: inset 0 0 10px 5px rgba(0,0,0,0.2),
10px 0 10px 0 rgba(57,85,198,0.4),
10px 0 10px 0 rgba(207,48,84,0.5)
}
理解这个属性后，自己需要的效果就很容易做出来喽！！！
