border 边框
有时候在中需一些分割来区分不同的区域,这个不但可以用来给元素边框,也可以作为不同区域的分割线。
CSS 的 border
是用于设置各种单独的边界的简写。 border
可以用于设置或多个以下的值: border-width
、border-style
、border-color
。
任何 h5 通过 border
,可以给它设置边框的宽度、展示出来的样子(实线、虚线、圆点等)和颜色。
border: [border-width ||border-style ||border-color |inherit] ;
值:
border-width
、border-style
、border-color
它们的遵循 css 的:左上、 右上 、右下 、左下 的原则。最多可以 4 个参数。
相关:
boder
可以直接设置元素的宽度、边框样式、颜色,不需要再去单独通过border-width
、border-style
、border-color
去设置。
接下来我们通过 div 元素,来说明 border 的使用。
<div class="demo"></div>
.demo{
width:px;
height: px;
border:px solid #ddd;
}
图
解释:通过border
为div
四周宽度为 1px、填充样式为solid
(实线)、颜色为#ddd
的边框。
.demo{
width:px;
height: px;
border-top:px solid #000;
background: #f2f2f2;
}
图
解释:通过border-top
可以只给 div 的顶部边框而不会影响其它部分的样式。
<button class="btn"></button>
.btn{
border-width: px;
}
图
解释:左边是认的 button , 右边是我们后的。
.demo{
width:px;
height: px;
border:px solid;
border-top-color:red;
border-right-color:green;
border-bottom-color:black;
border-left-color:orange;
}
图
这里千万不能写成 border-right:green;
我们有时候在元素内可能会使用margin-top
这样的来让子元素和父元素的顶部有间隔,但是经常不天遂人愿,发现它并没有达到我们想要的,反而变成了父元素距离上元素了距离。如果我们在父元素设置看不见的border
就可以这个问题。
td{
border:px solid #ccc;
border-bottom:none;
}
border-color 如果不设置那么它会使用元素中字体的颜色。
div{
widht:px;
height:px
border-width:px;
}
上面这样的设置 div 在中实际站位是 104px,如果不注意很容易造成错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’@R_894_2@-sizing: content-@R_894_2@;’,它在中实际宽度 = width
+border
( 该公式仅针对上面例子)。
如果我们需要给 button 设置颜色,那么它就会失去浏览器的交互。
border-top 的使用和 border 的使用是一样的,如果要个性化边的颜色,可以这样设置: border-top-color:red;
也可以这样设置: border-top:1px solid red;
。