笔记｜使用边框和背景（应用边框样式）

简介：计算机专业在读生，从网络安全转向web前端

在线学习，分享笔记。

当前阅读书籍《HTML5权威指南》

欢迎您的来访，欢迎讨论交流，一起学习。

1.基本边框属性

2.定义边框宽度

3.定义边框样式

3.为一条边应用边框样式

4.使用border简写属性

5.创建圆角边框

6.将图像用做边框

1.切分图像

2.控制切分图重复方式

1.基本边框属性

<style type="text/css"> 
p {
border-width: 5px;
border-style: solid;
border-color: black;
} 
</style>

2.定义边框宽度

border- width属性值：①常规css长度值 ②边框绘制区域宽度的百分数 ③三个快捷值中的一个

边框宽度默认值：medium

3.定义边框样式

border- style属性值：

边框样式的默认值：none

⚠️如果border-color属性值设为black，一些浏览器在应用双色边框样式（如inset和outset）的时候会出现问题。

3.为一条边应用边框样式

元素的四条边可以应用不同的边框样式，要用到特定属性。

可以用以上元素为元素的边应用边框样式，也可将其与更为通用的属性结合使用来覆盖特定的边框样式。

与更为通用的属性结合使用来覆盖特定的边框样式：

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

4.使用border简写属性

可以在一行中指定宽度、样式、颜色的值，也可用空格隔开。

<style type="text/css"> 
p {
border: medium solid black;
border-top: solid 10px;
} 
</style>

⚠️如果忘记设置某个值，浏览器会使用以前定义的值。

5.创建圆角边框

使用边框的radius特性创建圆角边框。

指定两个半径值可定义一个圆角，可采用长度值和百分数值（相对于元素盒子的宽度和高度）。
第一个值指水平曲线半径
第二个值指垂直曲线半径

半径值用来确定一个位于元素盒子内部，与元素盒子相交的椭圆，决定了圆角边框的形状。

<style type="text/css"> 
p { 
border: medium solid black;
border-top-left-radius: 20px 15px;
} 
</style>

⚠️如果只提供一个值，那么水平半径和垂直半径都是同一个值。

提示：

注意图中的圆角接触到了文本。要让元素的内容和边框之间有一定的距离。

使用border- radius简写属性可以为边框的四个角指定一个值，或者在一个值中包含四个值。

 <style type="text/css"> 
p { 
border: medium solid black; 
} 
#first {
border-radius: 20px / 15px;
} 
#second {
border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%;
} 
</style>

第一条声明只指定了两个值，这一对值会应用到边框的四个角上。⚠️要用/字符将水平半径和垂直半径隔开。第二条声明指定了8个值。第一组的四个值分别是四个角的水平半径，第二组的四个值是相应的垂直半径。两组值之间也用/字符分开了。

6.将图像用做边框

边框不仅限于用border-style属性定义的样式，我们可以使用图像为元素创建真正的自定义边框。

1.切分图像

将图像用做边框的关键是切分图像。

要切分图像：提供图像边框在四个方向上向内偏移的值（长度值或相对图像尺寸的百分数），可提供四个或两个（水平方向和垂直方向的偏移量）也可一个值（四个偏移量一样）。

<style type="text/css"> 
p {
-webkit-border-image: url(bordergrid.png) 30 / 50px;
-moz-border-image: url(bordergrid.png) 30 / 50px;
-o-border-image: url(bordergrid.png) 30 / 50px;
} 
</style>

每个属性声明的参数一样，必须使用url功能指定图像来源。
指定切分尺寸不需要单位，默认使用px。
切分值和边框宽度值之间使用了/字符进行分割，可以为元素的每条边指定不同的宽度。

2.控制切分图重复方式

border- image- repeat属性可以实现切分图重复

<style type="text/css"> 
p { 
-moz-border-image: url(bordergrid.png) 30 / 50px round repeat; 
} 
</style>

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