边框阴影、轮廓、分栏

来源:互联网 发布:淘宝客高佣金推广 编辑:程序博客网 时间:2024/05/16 11:08

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


columns: 宽度 栏目数
column-width  定义每栏的宽度
column-width: [<length> auto]
auto属性值取计算机值,而<length>属性值表示由浮点数字和单位标识符组成的长度值
column-span  定义元素可以在栏目上定位显示
column-span: 1 | all
"column-span: 1;"表示只在本栏中显示;而"column-span: all;"表示横跨所有栏目并定位在栏目的Z轴之上
column-rule属性定义每栏之间边框的宽度、样式和颜色
column-rule:<length> <style> <color>
column-gap属性定义两栏之间的间距
column-gap: normal <length>
normal参数值为1em,而<length>参数值表示由浮点数字和单位标识符组成的长度值,不可为负。
column-fill属性定义栏目的高度是否统一
column-fill: auto balance
auto参数值定义各栏目的高度随着内容的多少而自动变化;而balance参数值各栏目的高度将会根据内容最多的那一栏的高度进行统一
column-count属性主要用来定义栏目的数目。
column-count: auto 整数
colunm-break-after定义元素之后是否断行。
colunm-break-after:auto <always> <avoid>
auto参数为指定颜色

0 0
原创粉丝点击