《HTML5权威指南》之使用边框和背景

来源：互联网发布：新媒体矩阵建设方案编辑：程序博客网时间：2024/05/16 12:22

《HTML5权威指南》之使用边框和背景

1.应用边框样式

简单的边框有三个属性：border-width,border-style和border-color，其中：

border-width 设置边框宽度
border-style 设置绘制边框使用样式
border-color 设置边框颜色

1.1.设置边框宽度

border-width的值可能是常规css长度值，也可能是边框绘制区域宽度的百分比。也可能是三个名称值：

值                            说明<长度值>                       将边框长度设置为以css单位表达的长度值<百分数>                       将边框长度值设为边框绘制区域的宽度百分数thin                          三个名称宽度依次增加mediumthick

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-styleborder-left-colorborder-right-width      定义右边            跟通用属性值一样border-right-styleborder-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-radiusborder-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,垂直半径为15pxborder-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>

阅读全文

0 0