一、前言
网站开发过程中,若页面整体背景为白色,其中的页签元素若使用普通的样式,整个页面看上去就会比较呆板、平面化。可以考虑应用圆角、阴影效果增加页面活力。
其中,CSS3
定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9
及以上版本,而文本阴影需要IE10
及以上版本。下面介绍box-shadow
盒子阴影的使用:
对最底下div元素设置样式如下:
<style scoped>
.wrapperClass {
background: url(../../../static/appCenter/bg@2x.png) no-repeat center center fixed ;
background-size: cover;
box-sizing: border-box;
}
</style>
二、原理介绍
2.1 盒子阴影 box-shadow
box-shadow
属性向box
添加一个或多个阴影。
语法:
box-shadow: offset-x offset-y blur spread color inset;
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];
数值从左至右:阴影水平偏移值(正值向右,负值向左);阴影垂直偏移值(正值向下,负值向上);阴影模糊值;阴影扩散值;阴影颜色;投影方式。
参数解释:
offset-x
:必需,取值正负都可。offset-x
水平阴影的位置。offset-y
:必需,取值正负都可。offset-y
垂直阴影的位置。blur
:可选,只能取正值。blur-radius
阴影模糊半径,0即无模糊效果,值越大阴影边缘越模糊。spread
:可选,取值正负都可。spread
代表阴影的周长向四周扩展的尺寸,正值,阴影扩大,负值阴影缩小。color
:可选。阴影的颜色。如果不设置,浏览器会取默认颜色,通常是黑色,但各浏览器默认颜色有差异,建议不要省略。可以是rgb(250,0,0)
,也可以是有透明值的rgba(250,0,0,0.5)
。inset
:可选。关键字,将外部投影(默认outset
)改为内部投影。inset
阴影在背景之上,内容之下。
注意⚠️:inset
可以写在参数的第一个或最后一个,其它位置是无效的。
三、拓展阅读
- 《网站开发进阶专栏》