CSS中阴影主要有box-shadow
和text-shadow
两种,恰当的使用阴影,能让页面扁平无聊的页面瞬间变得具有立体的美感。
<span id="shadow-demo1">test</span>
#shadow-demo1 {
/* offset-x | offset-y | blur-radius | color */
text-shadow: 3px 3px 10px rgb(0, 0, 0);
}
<div id="shadow-demo2"></div>
#shadow-demo2 {
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 10px 10px rgba(0, 0, 0, 0.2);
}
blur-radius
和spread-radius
的区别其实很明显:
blur
表示模糊,该半径越大,阴影约模糊,反之越锐利spread
表示传播,其实就是指定阴影大小如果加一个inset
,可以将外阴影变为内阴影,例如box-shadow: inset 2px 2px 10px 10px rgba(0, 0, 0, 0.2)
。