边框阴影与轮廓

时间：2015-06-14 20:06:04 阅读：143 评论：0 收藏：0 [点我收藏+]

标签：

本文介绍如何给<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,否则轮廓不会出现。

边框阴影与轮廓

标签：

原文地址：http://blog.csdn.net/lindonglian/article/details/46492979

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行