ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

使用边框和背景

2021-09-17 18:34:56  阅读：238  来源： 互联网

标签：repeat 背景 图像 边框 background 使用 border 属性


使用边框和背景

应用边框样式

先从控制边框样式的属性开始。这些属性使用相当普遍，有了它们，要学习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属性来定义的。

image

定义边框宽度

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 实线边框

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

image

如果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>

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

image

使用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简写属性定义的颜色。设置这些属性的效果如下图所示。

image

创建圆角边框

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

圆角边框属性

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

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

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

image

代码清单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>

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

image

提示

注意图中的圆角接触到了文本。要让元素的内容和边框之间有一定的距离，我们可以为元素盒子添加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个值。第一组的四个值分别是四个角的水平半径，第二组的四个值是相应的垂直半径。两组值之间也用/字符分开了。这两条声明的效果如下图所示。第二条声明的显示结果看起来有点怪异，不过起码你能了解如何在一条声明中为边框定义四个不一样的圆角，顺带感受一下随意混用百分数和各种长度值。

image

将图像用做边框

边框不仅限于用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），如下图所示。

image

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

image

切分图像后生成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），即四条边都会使用这个值。下图展示了火狐浏览器中的效果。

image

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

而它的原图是这样的：

image

控制切分图重复方式

在下图中，为了填满边框的整个空间，切分图被拉伸了。我们可以改变图像重复方式，得 到不同的呈现效果。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中，第一个值指定了切分图的水平重复样式，第二个值指定了垂直重复样式。如果只提供一个值，那么水平和垂直重复样式一样。从下图中可以看出这两个值的区别。

image

注意：顶边和底边不包含任何截断的切分图。数字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属性的值。从下图可以看到这张图像的效果。背景图像总是显示在背景颜色之上。

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值的效果

image

cover值的效果

image

auto值的效果

image

皮卡丘图像的高度要比宽度大，这就是说你在使用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从下图中可以看出设置图像位置的效果。

image

设置元素的背景附着方式

为具有视窗的元素应用背景时，可以指定背景附着内容的方式。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值的效果

image

local值的效果

image

scroll值的效果

image

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

背景的起始点（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的效果。

原图

image

值border-box的效果图

image

值padding-box的效果图

image

值content-box的效果图

image

通过应用裁剪盒子，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>

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

image

使用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);

image

提示

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

创建盒子阴影

备受开发人员热切期待的一个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属性设置的效果如下图所示。

image

我们可以在一条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>

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

image

应用轮廓

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

轮廓属性

属 性 说 明 值
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>

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

image

标签：repeat,背景,图像,边框,background,使用,border,属性
来源： https://www.cnblogs.com/Huang-zihan/p/15236489.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有