CSS边框（style color width radius）

border

border 属性是一个用于设置各种单独的边界属性的简写属性,允许指定元素边框的样式（border-style)、宽度(border-width)和颜色(boder-color)。

注： 虽然 border-width , border-style 和 border-color 简写属性接受最多 4 个参数来为不同的边设置宽度、风格和颜色，但 boder 属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。

border-style

除非设置了 border-style 属性，否则其他 CSS 边框属性都不会有任何作用！

border-width

它也是一个简写属性，是border-top-width, border-right-width, border-bottom-width, border-left-width的简写。

语法

/* 用法一：明确指定宽度值 */
/* 当给定一个宽度时，该宽度作用于选定元素的所有边框 */
border-width: 5px;
/* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 */
border-width: 2px 1.5em;
/* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
border-width: 1px 2em 1.5cm;
/* 当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边（即按顺时针依次作用） */
border-width: 1px 2em 0 4rem;

/* 用法二：使用全局关键字 */
/* 可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置） */
border-width: inherit;

/* 用法三：使用作用于 border-width 的关键字 */
border-width: thin;
border-width: medium;
border-width: thick;

border-color

可以通过以下方式设置颜色：

• name - 指定颜色名，比如 “red”
• HEX - 指定十六进制值，比如 “#ff0000”
• RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
• HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
• transparent

注释：如果未设置 border-color，则它将继承元素的颜色。

border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

.example{
	border-style:solid;
	border-color:red pink blue purple; /*顺时针顺序*/
}

border-radius

用于设置圆角边框的一个简写属性，设置顺时针方向四个角的圆的半径

例如：

div{
	border:purple solid 5px;
	border-radius:20px;
}

(白色框框是我截图产生的，代码生成的是紫色框框)

后记

打卡第12天啦

再宣传一下自己的打卡小活动：
现在大学生们往往都被绩点浪潮卷着走，分分必争
同时又听着“要根据自己方向学，别只跟着学校”的劝诫，争夺分数的时候又哪有那么多时间呢？
经过大一一年的迷茫，我一拍大腿一咬牙，试一下吧！
学自己好奇的知识，并且学前端这样一个学校不考察的方面。
初中高中甚至大一都是乖巧的好学生，人生不长，想做做自己没体验过的！
所以每天都会打卡发帖子，主要是记录性的，同时也能作为一个查找资料帮助大家。
欢迎关注我，一起打卡，一起走一条自定义的内卷破局之路！