CSS3使用边框和背景

1.应用边框样式

关键属性：    border-width    // 设置边框宽度 <长度值>/<百分比>/thin/medium/thick    border-style    // 设置绘制边框使用的样式 none/dashed/dotted/double/groove/inset/outset/ridge/solid    border-color    // 设置边框颜色    案例：        <style type="text/css">            p {                border-width: 5px;                border-style: solid;                border-color: black;            }        </style>边框特定属性：    border-top-width    border-top-style    border-top-color    border-bottom-width    border-bottom-style    border-bottom-color    border-left-width    border-left-style    border-left-color    border-right-width    border-right-style    border-right-color边框简写属性 <width> <style> <color>：    border    border-top    border-bottom    border-left    border-right案例(注意：下面设置的属性会覆盖上面的属性)：    <style type="text/css">        p {           border: 5px dashed orangered;           border-top-color: black;        }    </style>圆角边框：    border-top-left-radius    border-top-right-radius    border-bottom-right-radius    border-bottom-left-radius    border-radius案例：    <style type="text/css">        p {            border: 5px solid orangered;            border-top-color: black;            border-top-left-radius: 20px 15px;            padding-left: 20px;            padding-top: 20px;        }        #second {            border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%;        }    </style>用图像做边框：    border-image-source // 设置图片来源 none/url    border-image-slice  // 设置切分图像的偏移    border-image-width  // 设置图像边框的宽度    border-image-outset // 指定边框向外扩展的部分    border-image-repeat // 设置图像填充边框区域的模式    border-image    // 在一条声明中设置所有值的简写属性案例：    <style type="text/css">        p {            -webkit-border-image: url(/image/bg.jpg) 30 / 50px;            -moz-border-image: url(image/bg.jpg) 30 / 50px;            -o-border-image: url(image/bg.jpg) 30 / 50px;        }    </style>border-image-repeat:     stretch/repeat/round/space 

2.背景属性

盒模型的另一个可见区域就是标签的内容,内容区域的背景样式需要用到的属性background-color    // 显示背景图像下面background-image    // 背景图,指定一个以上的背景图,后面的图像绘制在前面图像下面background-repeat   // 设置图像的重复方式 repeat-x/repeat-y/repeat/space/round/no-repeatbackground-size // 设置背景图的尺寸 contain/cover/autobackground-position // 设置背景图像的位置  top/left/right/bottom/center  2个值(一个值控制垂直位置一个值控制水平位置)background-attachment   // 设置元素中的图像是否固定或随页面一起滚动  fixed/local/scroll  background-clip //这种背景图像剪切方式  border-box/padding-box/content-boxbackground-origin   // 设置背景图像绘制的起始位置  border-box/padding-box/content-boxbackground  // 简写属性案例1：    <style type="text/css">        p {            border: medium solid black;            background-color: lightgrey;            background-image: url(image/icon.png);            background-repeat: repeat-x;            background-size: 50px 50px;            background-position: 30px 10px        }    </style>background:    <background-color>     <background-position>     <background-size>     <background-repeat>     <background-origin>    <background-clip>    <background-attachment>    <background-image>

3.创建盒子阴影

box-shadow: <hoffset> <voffset> <blur> <spread> <color> <inset> (阴影可以有多组)    hoffset // 阴影的水平偏移量    voffset // 阴影的垂直偏移量    blur    // 指定模糊值,默认值为0,边界清晰    spread  // 指定阴影的延伸半径    color   // 设置阴影的延伸颜色    inset   // 将外部阴影设置为内部阴影

4.应用轮廓

轮廓属性：    outline-color   // 外围轮廓颜色    outline-offset  // 轮廓边缘的偏移量    outline-style   // 轮廓样式    outline-width   // 轮廓宽度 thin/medium/thick    outline // <color> <style> <width>