网站开发进阶(七十）：CSS 实现圆角有立体感的 DIV 边框

一、前言

网站开发过程中，若页面整体背景为白色，其中的页签元素若使用普通的样式，整个页面看上去就会比较呆板、平面化。可以考虑应用圆角、阴影效果增加页面活力。

其中，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 可以写在参数的第一个或最后一个，其它位置是无效的。

三、拓展阅读

• 《网站开发进阶专栏》