CSS - border属性

image.png

👍狠狠戳我 → 瞎搞CSS - border

border 属性是一个用于设置各种单独的边界属性的简写属性，可以用于设置一个或多个以下属性的值：border-width、border-style、border-color

image.png

border-width

设置盒子模型的边框宽度 (按顺时针方向作用 上右下左)

• border-width: 5px; 作用于元素的所有边框;
• border-width: 5px 5px; 分别依次作用于元素的横边与纵边；
• border-width: 5px 5px 5px; 分别依次作用于元素的上横边、纵边、下横边；
• border-width: 5px 5px 5px 5px; 分别依次作用于元素的上横边、右纵边、下横边、左纵边；
• border-width: thin; 细边线
• border-width: medium; 中等边线
• border-width: thick; 宽边线

border-style

用来设定元素所有边框的样式

• none 不显示
• hidden 不显示
• dotted 点状
• dashed 虚线
• solid 实线
• double 双实线
• groove 雕刻
• ridge 浮雕
• inset 陷入
• outset 突出

border-color

用于设置元素四个边框颜色

border-radius

示例

image.png

.demo {
  width: 300px;
  height: 300px;
  background-color: rgb(255, 255, 255);
  border-width: 53px;
  border-style: ridge;
  border-color: rgb(60, 225, 0);
  border-radius: 40px 40px 40px 40px;
}

参考

1. border - CSS：层叠样式表 | MDN (mozilla.org)