《HTML5权威指南》之使用边框和背景
1.应用边框样式
简单的边框有三个属性：border-width,border-style和border-color，其中：
- border-width 设置边框宽度
- border-style 设置绘制边框使用样式
- border-color 设置边框颜色
1.1.设置边框宽度
border-width的值可能是常规css长度值，也可能是边框绘制区域宽度的百分比。也可能是三个名称值：
值 说明
<长度值> 将边框长度设置为以css单位表达的长度值
<百分数> 将边框长度值设为边框绘制区域的宽度百分数
thin 三个名称宽度依次增加
medium
thick
1.2.设置边框样式
border-style属性的值可以是以下中的任意一个：
值 说明
none 没有边框
dashed 破折线式边框
dotted 圆点式边框
double 双线式边框
groove 槽线式边框
inset 使元素内容具有内嵌效果的边框
outset 使元素内容具有外凸效果的边框
ridge 脊线边框
solid 实线边框
实际效果如图：
1.3.为一条边设置边框样式
元素的四条边可以应用不同的边框样式，这需要一些特定的属性:
属性 说明 值
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
例子：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
border-width: 5px;
border-style: solid;
border-color: black;
border-left-width: 10px;
border-left-style: dotted;
border-top-width: 10px;
border-top-style: dotted;
}
</style>
</head>
<body>
<p>one two three four five </p>
</body>
</html>
实际效果如图：
1.4.使用边框简写属性
可以使用border的简写属性设置，可以在一行中指定宽度，样式，颜色。如下代码：
示例代码：
<style type="text/css">
p {
border: medium solid black;
}
</style>
1.5.创建圆角边框
可以使用边框的radius特性创建圆角边框，说明如下：
属性 说明 值
border-top-left-radius 设置一个圆角 一对长度值或百分数值，百分数跟边框盒子的宽度和高度有关
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius 一次设置四个角的简写属性 一对或四对长度值或百分数，由/字符分隔
只要指定了两个半径即可指定一个圆角，第一个值指定水平曲线半径，第二个值指定垂直曲线半径。
示例代码：
<style type="text/css">
p {
border: medium solid black;
border-top-left-radius: 20px 15px;
}
</style>
用border-radius简写属性可以为边框的四个角指定一个值，或者在一个值中包含四个值。代码如下：
border-radius: 20px / 15px;
表示水平半径为20px,垂直半径为15px
border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%;
表示第一组的四个值从左上角开始，顺时针定义水平半径，第二组四个值定义垂直半径。
1.6.将图像作为边框
border-image属性如下：
属性 说明 值
border-image-source 设置图像来源 none或url(<图像>)
border-iamge-slice 设置切分图像的偏移 1~4个长度值或百分数，受图像的宽度和高度的影响
border-image-width 设置图像边框的宽度 auto或1~4个长度值或者百分数
border-image-outset 指定边框图像向外扩展的部分 1~4长度值或者百分数
border-image-repeat 设置图像填充边框区域的模式 stretch，repeat,round中的一个或者两个值
border-image 在一条声明中设置所有属性 跟单个属性值设置一样
1.切分图像
将图像作为边框的关键是切分图像，浏览器会将图像切分成9块，如果要切分图像，需要提供图像边框在四个方向上向内的偏移值，也就是提供四个值，顺序分别是水平左，水平右，垂直上，垂直下。如下是书上的一个示例图：
切分图像的示例代码：
<style type="text/css">
p {
<!--设置图像的边框四个方向的切分偏移值为30px,因为偏移值的单位默认是px，可以不写,之后用/字符分隔设置边框的宽度-->
-webkit-border-image:url(<图像名>) 30 /50px;
-moz-border-image: url(<图像名>) 30 20 40 50 / 50 20 50 30;
-o-border-image: url(<图像名>) 30 / 50px;
}
</style>
2.控制图像的重复方式
默认情况下，图像作为边框，如图有一边框图像太短会被拉伸，这时我们可以改变图像的重复方式，得到不同的呈现效果。下面描述了定义重复方式的值：
值 说明
stretch 拉伸切分图像填满整个空间，默认值
repeat 平铺切分图像填满整个空间，可能导致图片被截断
round 在不截断图片的情况下，平铺切分图并拉伸以填满整个空间
space 在不截断图片的情况下，平铺切分图并在图片之间保留一定的间距以填满整个空间
2.设置元素的背景
2.1.设置背景颜色和图像
可以给元素设置背景图像和背景颜色，或者两者同时设置，示例代码如下：
<style type="text/css">
p {
<!--设置边框属性-->
border: medium solid black;
<!--设置背景颜色-->
backgroud-color: lightgray;
<!--设置背景图像-->
backgroud-image: url(图像名);
<!--设置背景图像的大小-->
backgroud-size: 40px 40px;
<!--设置背景图像的平铺方式，这里以水平方式平铺-->
backgroud-repeat: repeat-x;
}
</style>
说明：背景图像总是显示在背景颜色之上。
使用background-repeat属性可以实现怎样重复背景图像，说明如下：
属性值 说明
repeat-x 水平方向平铺图像，图像可能被截断
repeat-y 垂直方向平铺图像，图像可能被截断
repeat 水平和垂直方向同时平铺，图像可能被截断
space 水平或垂直方向平铺图像，但在图像与图像之间设置统一间距，确保图像不被截断
round 水平或者垂直方向平铺图像，但调整图像大小，确保图像不被截断
2.2.设置背景图像的尺寸
background-size属性值的设置：
属性值 说明
contain 等比例缩放图像，使图像宽度，高度中较大值与容器重合，背景图像始终包含在容器内
cover 等比例缩放图像，使图像至少覆盖容器，就是说取图像的宽度，高度较小值与容器重合，有可能超出容器
auto 默认值，图像以本身大小显示
2.3.设置背景图像的位置
如果背景图像在不平铺的时候，可以指定背景图像的位置。示例代码如下：
<style type="text/css">
p {
<!--设置背景图像的位置，距离左边界30px，距离顶部边界20px-->
backgroud-position: 30px 20px;
}
</style>
也可以指定预定义值：
值 说明
top 将背景图像定为到盒子顶部边界
left 将背景图像定位到盒子的左边界
right 将背景图像定位到盒子的右边界
bottom 将背景图像定位到盒子的底边界
center 将背景图像定位到盒子的中间
2.4.设置元素的背景附着方式
为具有视窗的元素应用背景时，可以指定背景的附着方式,textarea是常见的具有视窗的元素。可以自动添加滚动条，另一个常见的元素是body元素。
对背景附着方式的说明如下：
值 说明
fixed 背景固定在视窗上，即内容滚动时背景不动
local 背景附着在内容上，即背景随内容一起滚动
scroll 背景固定在元素上, 不会随内容一起滚动
示例代码：
<style>
textarea {
...
backgroud-attachment:scroll;
}
</style>
2.5.设置背景图像的开始位置和裁剪样式
背景的起始点指的是背景颜色和背景图像应用的位置，裁剪样式决定了背景颜色和图像在元素盒子中绘制的区域，下面是相关属性值的介绍：
值 说明
border-box 在边框盒子内部绘制背景颜色和背景图像
padding-box 在内边距盒子内部绘制背景颜色和背景图像
content-box 在内容盒子内部绘制背景颜色和背景图像
示例代码：
<style type="text/css">
p {
...
backgroud-origin: border-box;
}
</style>
说明背景图像是从边框最外边开始放置，也就是说，假设我们选择边框为双线类型，那么在双线之间背景图片也会进行填充，这时需要裁剪。
示例代码如下：
<style type="text/css">
background-clip: content-box;
</style>
如果两者一起使用，那么就是告诉浏览器在边框盒子内部绘制背景，但是丢弃盒子之外的内容。
2.6.使用background简写属性
可以使用简写属性在声明中设置所有背景值，以下是backgroud属性值的格式，其中包括多个单独的属性:
backgroud: <backgroud-color> <backgroud-position> <backgroud-size> <backgroud-repeat> <backgroud-origin> <backgroud-clip> <backgroud-attachment>
不过，当前有些浏览器还不支持这个简写特性。
3.创建盒子阴影
通过box-shadow属性可以为盒子指定阴影，其元素组成如下：
box-shadow: hoffset voffset blur spread color inset
说明如下：
值 说明
hoffset 阴影的水平偏移量，是一个长度值，正值代表向右边偏移，负值代表向左边偏移
voffset 阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子下方，负值代表阴影位于元素盒子上方
blur (可选)指定模糊值，是一个长度值，值越大盒子的边界越模糊，默认值为0，边界清晰
spread (可选)指定阴影的延伸半径，是一个长度值，正值代表阴影向盒子的各个方向延伸扩大，负值代表阴影延相反方向缩小
color (可选)设置阴影的颜色，如果省略，浏览器会自行选择一个颜色。
inset (可选)将外部阴影设置为内部阴影(内嵌到盒子中)。
示例代码：
<style type="text/css">
p {
border-box: 10px double black;
box-shadow: 5px 4px 10px 2px gray;
}
</style>
<style type="text/css">
p {
border-box: 10px double black;
<!--同时定义了内嵌和外延的阴影-->
box-shadow: 5px 4px 10px gray, 3px 20px 2px gray inset;
}
</style>
4.应用轮廓
轮廓对于边框来说是可选的，轮廓最有用的地方是在于短时间抓住用户对某个元素的注意力，边框与轮廓最大的区别在于，轮廓不属于页面，因此应用轮廓不需要调整页面，下面列出轮廓的相关属性:
属性 说明 值
outline-color 设置外围轮廓的颜色 <颜色>
outline-offset 设置轮廓距离元素边框边缘的偏移量 <长度>
outline-style 设置轮廓样式 跟border-style属性值一样
outline-width 设置轮廓的宽度 thin,medium,thick,<长度>
outline 在一条声明中设置所有的属性 <颜色>，<样式>，<宽度>
示例代码：
<style type="text/css">
p {
outline: thick solid red;
}
</style>
1896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
