CSS3-边框和背景
下述内容主要讲述了《HTML5权威指南》第19章关于“使用边框和背景”。
CSS3中边框和样式得到了增强。例如：可以创建圆角边框，使用图像边框，为元素创建阴影。
一、应用边框样式
表 基本边框属性
属性 | 说明 | 值 |
|---|---|---|
border-width | 设置边框的宽度 | <长度值>、<百分数>、Thin、medium、thick |
border-style | 设置绘制边框使用的样式 | none、dashed、dotted、double、groove、inset、outset、ridge、solid |
border-color | 设置边框的颜色 |
效果：
可以对特定边进行定义：top、bottom、left、right
border-*-width
border-*-style
border-*-color简便写法：
border: <宽度><样式><颜色>
border-*: <宽度><样式><颜色><style>
p{
height: 100px;
width: 300px;
border: 5px solid black;
}
/* 等价于 */
p{
height: 100px;
width: 300px;
border-width: 5px;
border-style: solid;
border-color: black;
}
</style>1. 创建圆角边框
可以使用边框的radius特性创建圆角边框。
属性 | 说明 | 值 |
|---|---|---|
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-botton-right-radius | 设置一个圆角 | 一对长度值或百分数值，百分数跟边框盒子的宽度和高度相关 |
border-radius | 一次设置四个角的简写属性 | 一对或四对长度值或百分值，由/字符分割 |
指定两个半径值即可定义一个圆角，第一个值指定水平曲线半径，第二个值指定垂直曲线半径。
<style>
div {
width: 300px;
height: 100px;
border: 5px solid red;
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
}
/* 等价于 */
div {
width: 300px;
height: 100px;
border: 5px solid red;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
}
</style>2. 将图像用做边框
属性 | 说明 | 值 |
|---|---|---|
border-image-source | 设置图像来源 | |
border-image-slice | 设置切分图像的偏移 | |
border-image-width | 设置图像边框的宽度 | |
border-image-outset | 指定边框图像向外扩展的部分 | |
border-image-repeat | 设置图像填充边框区域的模式 | stretch、repeat、round、space |
border-image | 所有值简写 |
示例：
p {
-o-border-image: url(../images/border-image.png) 27 / 27px round repeat;
border-image: url(../images/border-image.png) 27 / 27px round repeat;
}说明：切分值和边框宽度值之间使用了/字符进行分割.可以为元素的每条边指定不同的宽度,不过此处只提供了一个值(27px),即四条边公用
二、设置元素的背景
属性 | 说明 | 值 |
|---|---|---|
background-color | 设置元素的背景颜色，总是显示在背景图像下面 | |
background-img | 设置元素的背景图像，如果指定多个，后面的图像绘制在前面图像的下面 | |
background-repeat | 设置图像的重复样式 | repeat-x、repeat-y、repeat、space、round、no-repeat |
background-size | 设置背景图像的尺寸 | contain、cover、auto |
background-position | 设置背景图像的位置 | top、left、right、bottom、center |
background-attachment | 设置元素在的图像是否固定或随页面一起滚动 | fixed、local、scroll |
background-clip | 设置背景图像裁剪方式 | border-box、padding-box、content-box |
background-origin | 设置背景图像绘制的起始位置 | border-box、padding-box、content-box |
background | 简写属性 |
示例：
p{
border: medium solid black;
background-color: lightgrey;
background-image: url(../images/border-image.png);
background-size: 40px 40px;
background-repeat: repeat-x;
}简写：省略的值，浏览器会用默认值替代
background:<background-color> <background-position> <background-size> <background-repeat> <background-origin> <background-clip> <background-attachment> <background-img>三、创建盒子阴影
可以通过box-shadow属性实现阴影。
属性 | 说明 |
|---|---|
hoffset | 阴影的水平偏移量 |
voffset | 阴影的垂直偏移量 |
blur | （可选）模糊值 |
spread | （可选）阴影的延长半径 |
color | （可选）阴影的颜色 |
inset | （可选）将外部阴影设置为内部阴影（内嵌到盒子中） |
示例：
p{
border: 10px double black;
height: 100px;
box-shadow: 5px 4px 10px 2px gray inset;
}四、应用轮廓
轮廓对于边框是可选的。轮廓有用的地方在于短时间抓住用户对某个元素的注意力，如必须按压的按钮或是数据输入中的错误。 边框和轮廓最大的区别是：轮廓不属于页面，因此应用轮廓不需要调整页面布局。
属性 | 说明 | 值 |
|---|---|---|
outline-color | 设置外围轮廓的颜色 | <颜色> |
outline-offset | 设置轮廓距离元素边框边缘的偏移量 | <长度> |
outline-style | 设置轮廓样式 | 跟border-style一样 |
outline-width | 设置轮廓的宽度 | thin、medium、thick、<长度> |
outline | 简写 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮廓</title>
<style>
p{
width: 30%;
padding: 5px;
border: medium double black;
background-color: lightgrey;
margin: 2px;
float: left;
}
.outline{
outline: thick solid red;
}
</style>
</head>
<body>
<p>http://blog.csdn.net/ligang2585116</p>
<p class="outline">http://blog.csdn.net/ligang2585116</p>
<p>http://blog.csdn.net/ligang2585116</p>
<p>http://blog.csdn.net/ligang2585116</p>
</body>
</html>