本文介绍如何给<div>标签以及图像添加阴影效果,用户还可以给网页中一些元素添加轮廓效果。
box-shadow属性是给对象实现图层阴影效果。
box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影拓展半径 阴影颜色;
投影方式 此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值"inset",就是将外阴影变成内阴影。
X轴偏移量 指阴影水平偏移量,其值如果为正值,则阴影在对象的右边;反之为负值,阴影在对象的左边。
Y轴偏移量 指阴影垂直偏移量,其值如果为正值,阴影在对象的底部;如果为负值,阴影在对象的顶部。
阴影模糊半径 此参数是可选值,但其值只能是正数。如果其值为0,表示阴影不具有模糊效果,其值越大,阴影的边缘就越模糊。
阴影拓展半径 可选值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小。
阴影颜色 可选值,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在WebKit内核下的Safari和Chrome浏览器将无色,也就是透明,建议不要省略此参数。
outline属性(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline:<color> <style> <width> <offset> inherit
color 指定轮廓边框颜色
style 指定轮廓边框轮廓
width 指定轮廓边框宽度
offset 指定轮廓边框偏移位置的数值
inherit 默认
outline-width属性设置元素整个轮廓的宽度,只有当轮廓样式不是none时,这个宽度才会起作用。如果样式为none,宽度
实际上会重置为0.不允许设置负长度值。
outline-width: thin medium thick <length>
thin 定义细轮廓
medium 默认。定义中等的轮廓。
thick 定义粗的轮廓
<length> 定义轮廓粗细的值
outline-style属性用于设置一个元素的整个轮廓的样式。
outline-style: none dotted dashed solid double groove ridge inset outset
none 默认值。定义无轮廓
dotted 定义一个点状的轮廓
dashed 定义一个虚线轮廓
solid 定义一个实线轮廓
double 定义一个双线轮廓。双线的宽度等同于outline-width的值
groove 定义一个3D凹边轮廓。此效果取决于outline-color的值
ridge 定义一个3D凸槽轮廓。此效果取决于outline-color的值
inset 定义一个3D凹边轮廓。此效果取决于outline-color的值
outset 定义一个3D凸边轮廓。此效果取决于outline-color的值
outline-offset属性可以让轮廓偏离容器边缘,即可以调整外边框与容器边缘的距离
outline-offset:<length> inherit
<length> 定义轮廓距离容器的值
outline-color属性设置一个元素整个轮廓中可见部分的颜色。此时轮廓的样式不能是none,否则轮廓不会出现。