CSS 边框属性

在 CSS 中，边框属性用于设置 HTML 元素的边框样式、宽度和颜色。

border-style

border-style 属性用于定义边框的样式。其取值类型为关键字或者由“空格”分割的多个关键字。

/* 使用关键字设置边框样式 */
border-style: solid;

/* 或者使用多个关键字混合设置多重边框样式 */
border-style: dotted dashed double;

border-width

border-width 属性用于定义边框的宽度。其取值类型可以为长度值、百分比、em、thin、medium 或者 thick。

/* 使用长度值设置边框宽度 */
border-width: 2px;

/* 使用百分比设置边框宽度 */
border-width: 10%;

/* 或者使用关键字 thin、medium 或者 thick */
border-width: medium;

border-color

border-color 属性用于定义边框的颜色。其取值类型可以为颜色关键字、RGB 值、十六进制颜色码、或者 transparent。

/* 使用颜色关键字设置边框颜色 */
border-color: red;

/* 或者使用 RGB 值或者十六进制颜色码 */
border-color: #ff0000;

/* 或者使用 transparent 设置透明边框 */
border-color: transparent;

border

border 属性可以同时设置边框的样式、宽度和颜色。

/* 设置实线边框 */
border: 2px solid red;

/* 设置多重虚线边框 */
border: 1px dashed blue 3px solid red;

border-radius

border-radius 属性用于定义元素边框的圆角。

/* 设置所有圆角为 10px */
border-radius: 10px;

/* 分别设置四个角的圆角 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

以上就是 CSS 边框属性的介绍。学会如何正确使用这些属性可以帮助我们为网页元素添加丰富的边框效果。