【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

你可能感兴趣的:(【css】边框border的属性和使用方法)