css边框线怎么设置(css常用属性边框border详解)

css常用属性-边框border

1、设置元素的宽度、颜色、类型

#dv1{
  border: 10px aqua solid;
}

将 id=‘dv1’的元素的边框 进行设置

10px ：表示边框的大小

aqua：表示边框的颜色，颜色可以3种形式（rgb、16进制、颜色名）

solid：边框线条的样式

div元素border边框的简单设置

基本样式：

none 表示无边框

dotted 表示点状边框

border:dotted；点状边框的效果

dashed 表示虚线边框

dashed 表示虚线边框

solid 表示实线边框

solid 表示实线边框

double 表示双线边框

double 表示双线边框

groove 表示3D凹槽边框

groove 表示3D凹槽边框

ridge 表示3D 垄状边框

ridge 表示3D 垄状边框

inset 表示3D inset 边框

inset 表示3D inset 边框

outset 表示3D outset 边框

outset 表示3D outset 边框

2、单独设置边框的颜色、宽度、类型

border-style 、border-color、border-width

#dv1{
  border-style: solid;
  border-color:aqua;
  border-width: 10px;
}

将 id=‘dv1’的元素的边框 进行设置，代码书写方式不同，效果和第一个代码一致

3、可以对边框的四个边进行属性值各不相同的设置

#dv3{
  border-style: dashed solid dotted double;
  border-color: aqua red blueviolet yellowgreen;
  border-width:10px 20px 30px 40px;
}

将 id=‘dv3’的元素的边框 4个边分别进行不同值的设置

这是边框4个边设置不同的值的效果

注意：属性值要根据实际需求进行设置，示例只是为了更好的呈现效果进行的设置。

设置border的顺序是上右下左

设置一个属性，则四个边效果是一致的

设置两个属性，则表示上下一致，左右一致

设置三个属性，则表示上，右，下，不一致，左右是一致的