边框属性

边框属性：

1、边框

（1）、它的简写方式：

通过一个属性控制四个方向边框的效果
它的属性是：
border：width、style、color;
它们三个分别为：
width：边框的宽度，边框的粗细，是以px为单位的；
style：边框的样式，实线，虚线；它的取值是这样的：solid：实线、dotted：虚线、dashed：虚线
注意：dotted和dashed是两种不同的表现形式


color：边框颜色
取值：合法的颜色值（#rrggbb，rgb（，，））
取值为transparent（透明）
注意：
border：none；或border：0；可以取消元素边框

（2）、单边定义

它的属性为：
border-方向：width style color；
方向：top（上）、bottom（下）、left（左）、right（右）
举个"栗子"：
border-left：1pxdotted black；

（3）、单属性定义

它的属性为：
border-属性：值；
属性：width/style/color（同上…）
举个"梨子"
border-color：#f0f（四个边框颜色）

（4）、单边单属性定义

它的属性为：
border-方向-属性：值；
“栗子”：
border-left-color：red；（左边框为红色）

2.边框倒角：

将四个方向的角倒成圆角
它的属性为：
border-radius
取值为：绝对值或百分比
ex：
border-radius：5px；
border-radius：50%；（如果当前元素的宽和高相等的话，当前元素呈圆形）


这个可以了解一下：就是可以单独定义（当然应该没有人这么做…）
border-top-left-radius：左上角
border-bottom-left-radius：左下角
border-top-right-radius：右上角
border-bottom-right-radius：右下角

3、边框阴影

它的属性为：box-shadow
取值为： h-shadow、v-shadow、blur、 spread、color、inset
分别为：
h-shadow：（必须）阴影的水平偏移距离，+，右偏移，-，左偏移
v-shadow：（必须）引用的垂直偏移距离，+，下偏移，-，上偏移
blur：模糊距离
spread：阴影的尺寸
color：颜色
inset：值,默认的外阴影更改为内阴影
ex：
box-shadow：10px 10px；

4、轮廓

作用：绘制于元素周围的一条线，位于边框之外
属性为：
outline：width style color；
outline-widht：轮廓的宽度
outline-style：轮廓的样式
outline-color：轮廓的颜色
outline：none；或outline：0；取消元素轮廓

[^1]：这就是边框的属性希望对你有所帮助，让我们一起努力加油吧！