轮廓与阴影
郝东
155
轮廓与阴影
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性：
outline-color 规定边框的颜色。
outline-style 规定边框的样式。 常用的是定义实线轮廓，solid。
outline-width 规定边框的宽度。
例如：
p {
outline:#00FF00 dotted thick;
}
如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。
outline-style 属性用于设置元素的整个轮廓的样式。样式不能是 none，否则轮廓不会出现。
始终要在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
box-shadow 属性向框添加一个或多个阴影。
可以在任何元素上使用来添加阴影效果。如果元素同时设置了border-radius属性 ，那么阴影也会有圆角效果。
语法：
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;