目录
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样式，为了填满整个空间就有被截断的图。
