使用边框和背景

2024-01-30 11:35:04

使用边框和背景

应用边框样式

先从控制边框样式的属性开始。这些属性使用相当普遍，有了它们，要学习margin和padding属性就在视觉上方便多了。简单边框有三个关键属性：border-width、border-style和border-color。下表描述了这三个属性。

基本边框属性

属 性 说 明 值
border-width 设置边框的宽度
border-style 设置绘制边框使用的样式
border-color 设置边框的颜色 <颜色>

代码清单1展示了这些属性的用法。

代码清单1 定义简单的边框

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                border-width: 5px;
                border-style: solid;
                border-color: black;
            }
        </style>
    </head>
    <body>
        <p>
        三月走过柳絮散落，蒙尘的心事，恍恍惚惚已经隔世
        <hr>
        记忆油膏反复涂抹，无法愈合的伤口
        <hr>
        哪朵玫瑰没有荆棘，彩色的时间染上了
        </p>
    </body>
</html>

在代码清单1中，我使用p元素定义了一个段落，使用style元素为这个段落应用边框样式，边框样式是通过设置border-width，border-style和border-color属性来定义的。

使用边框和背景

定义边框宽度

border-width属性的取值可能是常规CSS长度值，可能是边框绘制区域宽度的百分数，也可能是三个快捷值中的任意一个。下表描述了边框宽度的可能取值。边框宽度默认值是medium。

border-width属性的取值

值 说 明
<长度值> 将边框宽度值设为以CSS度量单位（如em、px、cm）表达的长度值
<百分数> 将边框宽度值设为边框绘制区域的宽度的百分数
Thin、medium、thick 将边框宽度设为预设宽度，这三个值的具体意义是由浏览器定义的，不过，所有浏览器中这三个值代表的宽度依次增大

定义边框样式

border-style属性的值可以是下表中的任意一个。默认值是none，即没有边框。

border-style属性的取值

值 说 明
none 没有边框
dashed 破折线式边框
dotted 圆点线式边框
double 双线式边框
groove 槽线式边框
inset 使元素内容具有内嵌效果的边框
outset 使元素内容具有外凸效果的边框
ridge 脊线边框
solid 实线边框

这些边框的外观效果如下图所示。

使用边框和背景

如果border-color属性值设为black，一些浏览器在应用双色边框样式（如inset和outset）的时候会岀现问题。这些浏览器中就有谷歌Chrome，两种颜色都会使用黑色，最终的呈现效果相当于实线边框。聪明一点儿的浏览器知道使用灰度，比如Firefdx。为了实现下图中的效果（用的是Chrome），我将groove、inset、outset和ridge样式的border-color属性值设为了gray。

为一条边应用边框样式

元素的四条边可以应用不同的边框样式，这就要用到特定属性，如下表所示。

特定边的边框属性

属 性 说 明 值
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 定义右边 跟通用属性的值一样

可以使用这些属性为元素的边应用边框样式，也可以将它们与更为通用的属性结合使用来覆盖特定边的边框样式。代码清单2展示了后一种用法。

代码清单2 使用特定边边框属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <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>
        三月走过柳絮散落，蒙尘的心事，恍恍惚惚已经隔世
        记忆油膏反复涂抹，无法愈合的伤口
        哪朵玫瑰没有荆棘，彩色的时间染上了
        </p>
    </body>
</html>

这些属性设置的效果如下图所示。

使用边框和背景

使用border简写属性

我们也可以不用分开设置样式、宽度和颜色，而使用简写属性一次搞定。下表描述了这些属性。

border简写属性

属 性 | 说 明 | 值
border | 设置所有边的边框 | <宽度> <样式> <颜色>
border-top、border-bottom、border-left、bottom-right | 设置一条边的边框 | <宽度> <样式> <颜色>

可以在一行中指定宽度、样式、颜色的值从而为这些属性设置值，也可以用空格隔开，如代码清单3所示。

代码清单3 使用border简写属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                border: medium solid black;
                border-top: solid 10px;
            }
        </style>
    </head>
    <body>
        <p>
        三月走过柳絮散落，蒙尘的心事，恍恍惚惚已经隔世
        记忆油膏反复涂抹，无法愈合的伤口
        哪朵玫瑰没有荆棘，彩色的时间染上了
        </p>
    </body>
</html>

注意，我没有为border-top属性指定颜色值。如果你忘了设置某些值，浏览器会使用以前定义的值，这里使用的是border简写属性定义的颜色。设置这些属性的效果如下图所示。

使用边框和背景

创建圆角边框

可以使用边框的radius特性创建圆角边框。与该功能相关的属性有5个，下表是个总结。

圆角边框属性

属性 说明 值
border-top-1eft-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius 设置一个圆角 一对长度值或百分数值，百分数跟边框盒子的宽度和高度相关
border-radius 一次设置四个角的简写属性 一对或四对长度值或百分数值，由/字符分割

指定两个半径值即可定义一个圆角，采用长度值和百分数值均可。第一个值指定水平曲线半径，第二个值指定垂直曲线半径。百分数值是相对于元素盒子的宽度和高度来说的。下图展示了两个半径值如何确定一个圆角。

从图中可以看出，半径值用来确定一个位于元素盒子内部，与元素盒子相交的椭圆，并决定了圆角边框的形状。代码清单4中的样式声明中使用了这两个值来定义左上角的圆角边框。

使用边框和背景

代码清单4 创建圆角边框

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                border: medium solid black;
                border-top-left-radius: 20px 15px;
            }
        </style>
    </head>
    <body>
        <p>
        三月走过柳絮散落，蒙尘的心事，恍恍惚惚已经隔世
        记忆油膏反复涂抹，无法愈合的伤口
        哪朵玫瑰没有荆棘，彩色的时间染上了
        </p>
    </body>
</html>

如果只提供一个值，那么水平半径和垂直半径都是这个值。下图是浏览器中呈现的样式设置的效果。为了让你看得更清楚，我在旁边对左上角的圆角边框进行了放大处理。

使用边框和背景

提示

注意图中的圆角接触到了文本。要让元素的内容和边框之间有一定的距离，我们可以为元素盒子添加padding属性。

使用border-radius简写属性可以为边框的四个角指定一个值，或者在一个值中包含四个值，做法如代码清单5所示。

代码清单5 使用border-radius简写属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                border: medium solid black;
            }
            #黄子涵是帅哥 {
                border-radius: 20px / 15px;
            }
            #黄子涵是靓仔 {
                border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%
            }
        </style>
    </head>
    <body>
        <p id="黄子涵是帅哥">
            三月走过柳絮散落，蒙尘的心事，恍恍惚惚已经隔世
        </p>
        <p id="黄子涵是靓仔">
            哪朵玫瑰没有荆棘，彩色的时间染上了
        </p>
    </body>
</html>

代码清单5中定义了两个段落，每个段落分别有一个圆角边框声明。第一条声明只指定了两个值，这一对值会应用到边框的四个角上。注意，要用/字符将水平半径和垂直半径隔开。第二条声明指定了8个值。第一组的四个值分别是四个角的水平半径，第二组的四个值是相应的垂直半径。两组值之间也用/字符分开了。这两条声明的效果如下图所示。第二条声明的显示结果看起来有点怪异，不过起码你能了解如何在一条声明中为边框定义四个不一样的圆角，顺带感受一下随意混用百分数和各种长度值。

使用边框和背景

将图像用做边框

边框不仅限于用border-style属性定义的样式，我们可以使用图像为元素创建真正的自定义 边框。配置图像边框各个方面的属性有5个，外加一个可以在一条声明中配置所有特征的简写属 性。下表简单总结了这6个属性。

border-image属性

属 性 说 明 值
border-image-source 设置图像来源 none或者url(<图像>)
border-image-slice 设置切分图像的偏移 1 ~ 4个长度值或者百分数，受图像的宽度和高度影响
border-image-width 设置图像边框的宽度 auto或1 ~ 4个长度值或者百分数
border-image-outset 指定边框图像向外扩展的部分 1 ~ 4个长度值或者百分数
border-image-repeat 设置图像填充边框区域的模式 stretch、repeat和round中的一个或两个值
border-image 在一条声明中设置所有值的简写属性 跟单个属性的值一样
切分图像

将图像用做边框的关键是切分图像。开发人员指定图像边框向内偏移的值，浏览器会使用这些值来将图像切分为9块。为了演示切分效果，我创建了一个图像，它能简单明了地表达浏览器如何进行切分以及使用每块切分图（tile），如下图所示。

使用边框和背景

该图像大小为90px x 90px，每个切分图是30px x 30px。中间的切分图是透明的。要切分图像, 应该提供图像边框在四个方向上向内偏移的值，用长度值或者相对图像尺寸的百分数表示均可。可以提供四个不同的值，也可以只提供两个值（分别代表水平方向和垂直方向的偏移量），当然 只有一个值也可以（四个偏移量一样）。对于这个图像，我使用了一个值：30px，创建了需要的切分，如下图所示。

使用边框和背景

切分图像后生成8个切分图，标记为1、3、6、8的切分图分别用于绘制边框的四个角，标记为2、4、5、7的切分图分别用来绘制边框的四条边。代码清单6展示了浏览器特定属性如何切分图像并将切分图用于边框样式。

代码清单6 切分图像并将其用做边框
<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                -webkit-border-image: url(huangzihan.jpeg) 30 / 50px;
                -moz-border-image: url(huangzihan.jpeg) 30 / 50px;
                -o-border-image: url(huangzihan.jpeg) 30 / 50px;
            }
        </style>
    </head>
    <body>
        <p>
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世
            <br>
            哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了
            <br>
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人
            <br>
            当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            <br>
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            <br>
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            <br>
            约会 像是 是为 分享到 饱肚 滋味
            <br>
            曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
    </body>
</html>

每个属性声明的参数都一样。必须使用url功能指定图像来源（因为CSS规范保留了实现获取图像其他方式的权利）。每条声明中，我只提供了一个切分值30，跟示例图像中的切分图尺寸一样。注意：指定切分尺寸不需要单位，默认使用px。

切分值和边框宽度值之间使用了/字符进行分割。可以为元素的每条边指定不同的宽度，不过此处只提供了一个值（50px），即四条边都会使用这个值。下图展示了火狐浏览器中的效果。

使用边框和背景

可以从图中看到浏览器是如何使用每块切分图的。标记为2和7的切分图有点不好辨认，它们分别用到了顶边和底边上。

而它的原图是这样的：

使用边框和背景

控制切分图重复方式

在下图中，为了填满边框的整个空间，切分图被拉伸了。我们可以改变图像重复方式，得 到不同的呈现效果。border-image-repeat属性就能实现这个功能，不过，使用简写属性也能指定重复样式。下表描述了定义重复样式的值。

border-image-repeat样式的值
值 说 明
stretch 拉伸切分图填满整个空间，默认值
repeat 平铺切分图填满整个空间（可能导致图片被截断）
round 在不截断切分图的情况下，平铺切分图并拉伸以填满整个空间
space 在不截断切分图的情况下，平铺切分图并在图片之间保留一定的间距以填满整个空间

代码清单7展示的是在Firefox中使用repeat和round值改变边框的重复样式。

代码清单7 控制切分图的重复样式
<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                -webkit-border-image: url(huangzihan.jpeg) 30 / 50px round repeat;
            }
        </style>
    </head>
    <body>
        <p>
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世
            <br>
            哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了
            <br>
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人
            <br>
            当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            <br>
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            <br>
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            <br>
            约会 像是 是为 分享到 饱肚 滋味
            <br>
            曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
    </body>
</html>

在代码清单7中，第一个值指定了切分图的水平重复样式，第二个值指定了垂直重复样式。如果只提供一个值，那么水平和垂直重复样式一样。从下图中可以看出这两个值的区别。

使用边框和背景

注意：顶边和底边不包含任何截断的切分图。数字2和7先被稍微拉伸了一下，然后再平铺，因此没有截断的情况。相反，左边和右边仅使用了repeat样式，为了填满整个空间就有被截断的图。

设置元素的背景

盒模型的另一个可见区域是元素的内容。让我们就来学习一下定义内容区域的背景样式需要用到的属性。下表列出了即将介绍的属性。

背景属性

属性 说 明 值
background-color 设置元素的背景颜色，总是显示在背景图像下面 <颜色>
background-image 设置元素的背景图像，如果指定一个以上的图像，则后面的图像绘制在前面的图像下面 none或url（图像）
background-repeat 设置图像的重复样式
background-size 设置背景图像的尺寸
background-position 设置背景图像的位置
background-attachment 设置元素中的图像是否固定或随页面一起滚动
background-clip 设置背景图像裁剪方式
background-origin 设置背景图像绘制的起始位置
background 简写属性

设置背景颜色和图像

设置元素背景的起点是设置背景颜色或者背景图像，也可以使用背景属性同时设置两者，如代码清单8所示。

代码清单8 设置背景图像和颜色

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                border: medium solid black;
                background-color: lightgray;
                background-image: url(huangzihan2.jpeg);
                background-size: 40px 40px;
                background-repeat: repeat-x;
            }
        </style>
    </head>
    <body>
        <p>
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世
            <br>
            哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了
            <br>
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人
            <br>
            当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            <br>
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            <br>
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            <br>
            约会 像是 是为 分享到 饱肚 滋味
            <br>
            曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
    </body>
</html>

在上面这个例子中，我将背景颜色设置为浅灰色，并使用url加载了一张名为huangzihan.jpeg的图像，将其作为background-image属性的值。从下图可以看到这张图像的效果。背景图像总是显示在背景颜色之上。

使用边框和背景

这个背景图像多少有些遮盖了元素中的文本，除非非常小心，添加背景图像通常都会出现这种情况。你应该注意到了下图中的香蕉图像水平重复穿过了元素。使用background-repeat属性可以实现这种效果，下表列出了该属性的可能取值。

background-repeat属性的值

值 说 明
repeat-x 水平方向平铺图像，图像可能被截断
repeat-y 垂直方向平铺图像，图像可能被截断
repeat 水平和垂直方向同时平铺图像，图像可能被截断
space 水平或者垂直方向平铺图像，但在图像与图像之间设置统一间距，确保图像不被截断
round 水平或者垂直方向平铺图像，但调整图像大小，确保图像不被截断
no-repeat 禁止平铺图像

我们可以单独指定水平方向和垂直方向的重复样式，要是只有一个值的话，两个方向均会使用同种重复样式。repeat-x和repeat-y是例外，浏览器对于后者使用no-repeat样式。

设置背景图像的尺寸

除了使用长度值，属性值还可以是百分数（跟图像的宽度和高度相关）、预定义值。

background-size属性的值

值 说 明
contain 等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合，背景图像始终包含在容器内
cover 等比例缩放图像，使图像至少覆盖容器，有可能超出容器
auto 默认值，图像以本身尺寸完全显示

contain值确保图像调整尺寸后，整个图像始终包含在元素内部。浏览器判断图像长度和高度哪个更大，并将较大者调整至容器相应宽度或者高度大小。相反，如果属性取cover值，浏览器选中较小的值，并沿着该方向调整图像大小。这就意味着图像的某一部分可能不会显示，从下图中可以看出两者的不同之处。

contain值的效果

使用边框和背景

cover值的效果

使用边框和背景

auto值的效果

使用边框和背景

皮卡丘图像的高度要比宽度大，这就是说你在使用cover值的时候，应该调整图像尺寸，使得宽度方向上能被完全显示，即使这会导致高度方向上显示不完整。这个呈现效果可以从下图上面的元素背景图像设置看出来。要是使用contain值，就必须确保高度方向能在元素盒子中完整呈现，也就是说能显示完整的图像，即使最终图像不能覆盖整个背景区域。这个取值的呈现效 果可以从上图下面的元素背景图像设置看出来。

设置背景图像位置

浏览器使用background-position属性设置背景图像的位置。图像不平铺的时候这个属性用得最多。该属性的使用方法如代码清单9所示。

代码清单9 设置背景图像位置

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                border: medium solid black;
                background-color: lightgray;
                background-image: url(huangzihan2.jpeg);
                background-size: 40px 40px;
                background-repeat: no-repeat;
                background-position: 30px 10px;
            }
        </style>
    </head>
    <body>
        <p>
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世
            <br>
            哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了
            <br>
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人
            <br>
            当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            <br>
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            <br>
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            <br>
            约会 像是 是为 分享到 饱肚 滋味
            <br>
            曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
    </body>
</html>

这条声明告诉浏览器将背景图像设置为距离左边界30像素，距离顶部边界10像素。这里使用了长度单位指定位置，你也可以使用下表中列出的预定义值。

background-position属性的值

值 说 明
top 将背景图像定位到盒子顶部边界
left 将背景图像定位到盒子左边界
right 将背景图像定位到盒子右边界
bottom 将背景图像定位到盒子底部边界
center 将背景图像定位到中间位置

第一个值控制垂直位置，可以是top、bottom和center，第二个值控制水平位置，可以是left、right和centero从下图中可以看出设置图像位置的效果。

使用边框和背景

设置元素的背景附着方式

为具有视窗的元素应用背景时，可以指定背景附着内容的方式。textarea是常见的具有视窗的元素，可以自动添加滚动条以显示内容。另一个例子是body元素，如果其中的内容比浏览器的窗口长，可以为其设置滚动条。使用background-attachment属性可以控制背景的附着方式。下表列出了该属性的可能取值。

background-attachment属性的值

值 说明
fixed 背景固定到视窗上，即内容滚动时背景不动
local 背景附着到内容上，即背景随内容一起滚动
scroll 背景固定到元素上，不会随内容一起滚动

代码清单10展示了对textarea元素使用border-attachment属性。

代码清单10 使用border-attachment属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            textarea {
                border: medium solid black;
                background-color: lightgray;
                background-image: url(huangzihan2.jpeg);
                background-size: 120px 120px;
                background-repeat: repeat;
                background-attachment: local;
            }
        </style>
    </head>
    <body>
        <p>
            <textarea rows="8" cols="30">
                三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世；哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了          
                余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人；当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
                渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
                够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
                约会 像是 是为 分享到 饱肚 滋味；曾经 攀上的 天梯，曾经 拥抱的 身体
            </textarea>
        </p>
    </body>
</html>

这里无法在图中演示各种附着模式的不同之处了，效果只有在自己的浏览器中才能看到。想看看fixed和scroll模式的区别，可以使用示例中的HTML文档，将浏览器窗口调整到无法完整显示文本区域，scroll模式会启用浏览器的滚动条（而不是文本区域的滚动条）。

fixed值的效果

使用边框和背景

使用边框和背景
local值的效果

使用边框和背景

scroll值的效果

使用边框和背景

设置背景图像的开始位置和裁剪样式

背景的起始点（origin）指定背景颜色和背景图像应用的位置。裁剪样式决定了背景颜色和图像在元素盒子中绘制的区域。background-origin和background-clip属性控制着这些特性，两者都可以取以下三个值，如下表所示。

background-origin和background-clip属性的值

值 说 明
border-box 在边框盒子内部绘制背景颜色和背景图像
padding-box 在内边距盒子内部绘制背景颜色和背景图像
content-box 在内容盒子内部绘制背景颜色和背景图像

代码清单11 展示了background-origin属性的用法。

代码清单11 使用background-origin属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                border: 20px double black;
                background-color: lightgray;
                background-image: url(huangzihan2.jpeg);
                background-size: 100px 100px;
                background-repeat: repeat;
                background-origin: border-box;
            }
        </style>
    </head>
    <body>
        <p>
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世；哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了          
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人；当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            约会 像是 是为 分享到 饱肚 滋味；曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
    </body>
</html>

在代码清单11中，我使用了border-box值，也就是说浏览器会在边框下面绘制背景颜色和背景图像。之所以说“下面”，是因为边框肯定会绘制在背景上。从下图可以看岀background-origin属性值为border-box的效果。

原图

使用边框和背景

值border-box的效果图

使用边框和背景

值padding-box的效果图

使用边框和背景

值content-box的效果图

使用边框和背景

通过应用裁剪盒子，background-clip属性决定了背景的哪一部分是可见的。裁剪盒子之外的部分一律被丢弃，不会显示。background-clip属性的三个可能的取值跟background-origin属性 一样，代码清单19.12展示了如何组合使用这些属性。

代码清单12 使用background-clip属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                border: 40px double black;
                background-color: lightgray;
                background-image: url(huangzihan2.jpeg);
                background-size: 200px 200px;
                background-repeat: repeat;
                background-origin: border-box;
                background-clip: content-box;
            }
        </style>
    </head>
    <body>
        <p>
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世；哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了          
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人；当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            约会 像是 是为 分享到 饱肚 滋味；曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
    </body>
</html>

两者一起使用，告诉浏览器在边框盒子内部绘制背景，但是丢弃内容盒子之外的部分。如下图所示。

使用边框和背景

使用background简写属性

使用background简写属性可以在一条声明中设置所有的背景值。以下是background属性值的格式，其中包括多个单独的属性：

background: <background-color> <background-position> <background-size> <background-repeat> <background-origin> <background-clip> <background-attachment> <background-image>

这条声明真够长的，不过其中有些值可以省略。对于省略的值，浏览器会用默认值替代。代码清单13展示了background简写属性的用法。

代码清单13 使用background简写属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                border: 40px double black;
                background: lightgray top right no-repeat border-box content-box local url(huangzihan2.jpeg);
            }
        </style>
    </head>
    <body>
        <p>
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世；哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了          
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人；当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            约会 像是 是为 分享到 饱肚 滋味；曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
    </body>
</html>

这一条属性设置等价于同时设置以下几个属性:

background-color: lightgray;
background-position: top right; 
background-repeat: no-repeat; 
background-origin: border-box; 
background-position: content-box; 
background-attachment: local; 
background-image: url(banana.png);

使用边框和背景

提示

当前，有的浏览器还不支持这个简写属性。

创建盒子阴影

备受开发人员热切期待的一个CSS3特性是为元素的盒子添加阴影效果。这要通过box-shadow属性来实现，下表描述了这个属性的使用情况。

box-shadow属性

属性 说明 值
box-shadow 为元素指定阴影

box-shadow素的值组成如下：

box-shadow: hoffset voffset blur spread color inset

每个值代表的意思如下表所示。

box-shadow属性的值

值 说 明
hoffset 阴影的水平偏移量，是一个长度值，正值代表阴影向右偏移，负值代表阴影向左偏移
voffset 阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子下方，负值代表阴影位于元素盒子上方
blur （可选）指定模糊值，是一个长度值，值越大盒子的边界越模糊。默认值为0，边界清晰
spread （可选）指定阴影的延伸半径，是一个长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小
color （可选）设置阴影的颜色，如果省略，浏览器会自行选择一个颜色
inset （可选）将外部阴影设置为内部阴影（内嵌到盒子中）

警告

省略color值的时候应该留意。color值可选，浏览器可以自行应用标准颜色，可能是某种适合用户的操作系统或浏览器的颜色。最好在box-shadow属性中明确指定color值。

代码清单14展示了box-shadow属性的用法。

代码清单14 创建盒子阴影效果

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                border: 10px double black;
                box-shadow: 5px 4px 10px 2px gray;
            }
        </style>
    </head>
    <body>
        <p>
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世；哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了          
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人；当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            约会 像是 是为 分享到 饱肚 滋味；曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
    </body>
</html>

box-shadow属性设置的效果如下图所示。

使用边框和背景

我们可以在一条box-shadow声明中定义多个阴影，只需要用逗号分隔每条声明即可，如代码清单15所示。

代码清单15 为一个元素应用多个阴影

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                border: 10px double black;
                box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;
            }
        </style>
    </head>
    <body>
        <p>
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世；哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了          
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人；当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            约会 像是 是为 分享到 饱肚 滋味；曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
    </body>
</html>

上面的代码中定义了两个阴影，其中一个是内部阴影，效果如下图所示。

使用边框和背景

应用轮廓

轮廓对于边框来说是可选的。轮廓最有用的地方在于短时间抓住用户对某个元素的注意力，如必须按压的按钮或者数据输入中的错误。轮廓绘制在盒子边框的外面。边框和轮廓最大的区别是：轮廓不属于页面，因此应用轮廓不需要调整页面布局。下表列出了与轮廓相关的属性。

轮廓属性

属 性 说 明 值
outline-color 设置外围轮廓的颜色 <颜色>
outline-offset 设置轮廓距离元素边框边缘的偏移量 <长度>
outline-style 设置轮廓样式 跟border-style属性的值一样
outline-width 设置轮廓的宽度 thin、medium、thick、<长度>
outline 在一条声明中设置轮廓的简写属性 <颜色> <样式> <宽度>

代码清单16展示了对元素应用轮廓。为了说明如何在不重新设置页面布局的情况下绘制轮廓，这个示例中包含了一个简单的脚本。

代码清单16 应用轮廓

<!DOCTYPE HTML>
<html>
    <head>
        <title>黄子涵</title>
        <meta name="作者" content="黄子涵"/>
        <meta name="描述" content="黄子涵是帅哥"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <style type="text/css">
            p {
                width: 30%;
                padding: 5px;
                border: medium double black;
                background-color: lightgray;
                margin: 2px;
                float: left;
            }
            #黄子涵 {
                outline: thick solid red;
            }
        </style>
    </head>
    <body>
        <p>
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世；哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了          
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人；当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            约会 像是 是为 分享到 饱肚 滋味；曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
        <p id="黄子涵">
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世；哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了          
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人；当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            约会 像是 是为 分享到 饱肚 滋味；曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
        <p>
            三月 走过 柳絮 散落，蒙尘的 心事，恍恍惚惚 已经 隔世；哪朵 玫瑰 没有 荆棘，彩色的 时间 染上了          
            余生 伟大到 自卑 也是 人，无法 诚恳 豁达 做伟人；当晚 与你 记住 蒲公英，今晚 偏偏 想起 风 的 清劲
            渡日月 穿山水 尚在 恨 那谁，谁曾 无坚不摧 摧毁 的 废墟
            够钟 死心了，当你 沉默得 高调，有人 问我 我就会讲，但是 无人来
            约会 像是 是为 分享到 饱肚 滋味；曾经 攀上的 天梯，曾经 拥抱的 身体
        </p>
        <button>黄子涵是帅哥</button>
        <button>黄子涵是靓仔</button>
        <script>
            var huangzihan = document.getElementsByTagName("BUTTON");
            for (var huangzihan_i = 0; huangzihan_i < huangzihan.length; huangzihan_i++) {
                huangzihan[huangzihan_i].onclick = function(huangzihan_e) {
                   var huangzihan_elem = document.getElementById("黄子涵");
                   if(huangzihan_e.target.innerHTML == "黄子涵是帅哥") {
                    huangzihan_elem.style.outline = "none";
                    } else {
                        huangzihan_elem.style.outlineColor = "red";
                        huangzihan_elem.style.outlineStyle = "solid";
                        huangzihan_elem.style.outlineWidth = "thick";
                        }//code
                    }; 
                }
        </script>
    </body>
</html>

下图显示了应用轮廓的效果。注意一下元素为何没有改变位置，这是因为在页面布局中 没有为轮廓分配空间。

使用边框和背景

上一篇：实践GoF的23种设计模式：SOLID原则（上）


下一篇：给定一个数组arr，返回arr的最长无重复元素子数组的长度