【css】边框border的属性和使用方法

一、什么是边框

顾名思义，就是元素外面的一圈边框，下图中虚线圈起的部分是内容，外面橙色的一圈是它的边框，可以理解成在照片外面加一个相框，使用border属性。

图1 边框

二、属性设置

1、单独写法

border-top-width: 10px;  上边框的宽度
border-top-color: red;  上边框的颜色
border-top-style: solid; 上边框的样式：实线

边框样式border-style必须写！否则其它属性全部失效。

边框的样式：

solid 实线
dotted 点状
dashed 虚线
double 双线

2、复合写法

border后面可跟多个值，中间用空格分离，含义如下：

（1）复合写法1——设置某一条边框全部属性

注意顺序，边框样式不可省略，颜色和宽度可以省略，会显示默认的效果。

border-right: 50px dotted green;
设置右边框为50px宽，绿色的点状边框

（2）复合写法2——设置全部边框的某一属性

属性后面跟一个值时，表示四条边框都是这个值。
属性后面跟两个值时，第一个值表上下边框，第二个值表左右边框。
属性后面跟三个值时，第一个值表上边框，第二个值表左右边框，第三个值表下边框。
属性后面跟四个值时，第一个值表上边框，第二个值表右边框，第三个值表下边框，第四个值表左边框。（顺时针）

——以上规律在padding和margin一样适用。

border-width: 10px 30px 50px;
设置上边框宽度为10px，左右边框宽度为30px，下边框宽度为50px

border-color: red;
设置四条边框都为红色

border-style: solid dotted double dashed;
设置上边框样式为实线，右边框样式为点状，下边框样式为双线，左边框样式为虚线

边框样式border-style必须设置

（3）复合写法3——设置全部边框为同样的属性

如果我们的四条边框属性都是一样的，那么统一设置就可以啦，注意边框类型不可省略。

border: 10px dotted red;
设置四条边框为宽度10px的红色点状线

（4）删除某一条边框

border-bottom: none;
删除下边框

三、使用示例

1、基本使用

首先我们放置一个宽高为200px的粉色盒子。

        div{
            width:200px;
            height:200px;
            background: pink;
        }

图3-1-1 没有边框的盒子

接下来我们为它加上一条宽度为10px，样式为实线，颜色为红色的边框。

        div{
            width:200px;
            height:200px;
            background: pink;
            border:10px solid red;
        }

图3-1-2 带有边框的盒子

我们可以看到，添加边框的时候，是在盒子外面套一圈边框，而不是加在里面，在Chrome浏览器中点击右键检查，可以看到div的大小变成了220x220。

图3-1-3 查看尺寸

套在外面的边框的宽度是会加进盒子尺寸的（上下左右各增加了10px），如果我们想盒子保持大小不变，要对div本身的width和height进行减小，在这个样例中，通过计算可得，减少到180px即可保持大小不变。

图3-1-4 调整过宽高的盒子

2、缝隙填充

当我们使用点状、虚线等边框样式时，多出来的缝隙，会使用元素本身的背景颜色填充。

图3-2-1 虚线边框

图3-2-2 点状边框

点和虚线的具体样式，不同浏览器中可能会不一样。

3、组合情况

我们为刚刚的盒子设置上边框为红色，左边框为绿色，效果如下图所示：

border-top:10px solid red;
border-left:10px solid green;

图3-3-1 边框交界

我们会发现在两条边框交界处的小方块，通过一条对角线分隔，上边框和左边框各占一半。当边框不一样宽时，同样也是用对角线把交界处的小长方形一分为二，如下图所示：

border-top:10px solid red;
border-left:20px solid green;

图3-3-2 两条边框不一样宽时

当被添加边框的元素宽度为0，不设置高度（高度默认是0）的情况下，我们可以巧妙利用边框组合和transparent（透明）绘制三角形，可以体验下哦。

三角形1-css：

        div{
            width:0;
            border-top:200px solid red;
            border-left:200px solid transparent;
        }

图3-3-3 三角形1

三角形2-css：

        div{
            width:0;
            border-top:200px solid red;
            border-left:100px solid transparent;
            border-right:50px solid transparent;
        }

图3-3-4 三角形2

多彩三角形-css：

        div{
            width:0;
            border:200px solid;
            border-color:red yellow green blue;
        }

图3-3-5 多彩三角形

绘制梯形只要对应添加宽度或者高度就可以啦
梯形1-css：

        div{
            width:50px;
            border-top:200px solid red;
            border-left:100px solid transparent;
        }

图3-3-6 梯形1

梯形2-css：

        div{
            height:50px;
            border-left:200px solid red;
            border-top:100px solid transparent;
            border-bottom:50px solid transparent;
        }

图3-3-7 梯形2

相关文章
【css】内边距padding的属性和使用方法
https://www.jianshu.com/p/f3de8c5e7d5f
【css】外边距margin的属性和使用方法
https://www.jianshu.com/p/6b4592b64f1b