简单的CSS3.0

Hellow大家好！今天我们来学习边框，可别小看这么一个边框啊，它蕴含的东西啊可多着呢。上次我们说过啊很多代码都是由英文翻译过来的，那边框是什么呢？没错啊我们这期就围绕一个代码进行的，那就——border。

1、首先我们来看最简单的一个代码

div{

width: 100px;

height: 100px;

border-right: 1px solid;

}

<div></div>

这样我们就能看到

非常朴实无华的一条线啊，这个代码是什么意思呢？告诉我们啊在div元素右边创建一个边框，并且是直线的，所以以此类推啊我们在上下左右都可以创建一条线，合起来就是一个边框啦。

div{

        width: 100px;

        height: 100px;

        border-right: 1px solid;

        border-left: 1px solid;

        border-top: 1px solid;

        border-bottom: 1px solid;

    }

<div></div>

这样我们就组成一个完整的边框啦

让我们继续啊，那在border后面添加方向就是控制在哪创建边框，那如果添加别的东西呢

 div{

        width: 100px;

        height: 100px;

        border-right: 1px solid;

        border-left: 1px solid;

        border-top: 1px solid;

        border-bottom: 1px solid;

        border-color: red;

    }

 <div></div>

没错啊在border后面添加颜色就能改变边框的颜色啦

甚至我们还能把这两种代码融合一下呢！

div{

        width: 100px;

        height: 100px;

        border-right: 1px solid;

        border-left: 1px solid;

        border-top: 1px solid;

        border-bottom: 1px solid;

        border-right-color: red;

        border-left-color:blue;

        border-top-color: blueviolet;

        border-bottom-color: aquamarine;

    }

<div></div>

在border后面加上方向在加上颜色啊就能控制每个方向上面线条的颜色了！是不是非常有意思呢！

我们再来看啊，这个框的大小当然也是可以设置的啦

 div{

        width: 100px;

        height: 100px;

        border-right: 1px solid;

        border-left: 1px solid;

        border-top: 1px solid;

        border-bottom: 1px solid;

        border-right-color: red;

        border-left-color:blue;

        border-top-color: blueviolet;

        border-bottom-color: aquamarine;

        border-width: 5px;

    }

<div></div>

我们可以用border-width来调整表格的粗细，聪明的小伙伴肯定又发现啦，这个线条粗细啊每个方向也是可以进行调整的哦

div{

        width: 100px;

        height: 100px;

        border-right: 1px solid;

        border-left: 1px solid;

        border-top: 1px solid;

        border-bottom: 1px solid;

        border-right-color: red;

        border-left-color:blue;

        border-top-color: blueviolet;

        border-bottom-color: aquamarine;

        border-right-width: 2px;

        border-left-width: 3px;

        border-top-width: 4px;

        border-bottom-width: 5px;

    }

<div></div>

虽然长得有点丑啊，但是我们不要在意这些细节啦

那既然方向、颜色、组粗都可以调，那线条的样式是不是也可以调呢，答案当然是也可以啦

div{

        width: 100px;

        height: 100px;

        border-right: 1px solid;

        border-left: 1px solid;

        border-top: 1px solid;

        border-bottom: 1px solid;

        border-right-color: red;

        border-left-color:blue;

        border-top-color: blueviolet;

        border-bottom-color: aquamarine;

        border-right-width: 2px;

        border-left-width: 3px;

        border-top-width: 4px;

        border-bottom-width: 5px;

        border-style: dashed;

    }

 <div></div>

这样我们就调成虚线啦，还有很多的样式哦大家可以自己去实现以下啦

以此类推，每个方向上的样式也都是可以不一样的

div{

        width: 100px;

        height: 100px;

        border-right: 1px solid;

        border-left: 1px solid;

        border-top: 1px solid;

        border-bottom: 1px solid;

        border-right-color: red;

        border-left-color:blue;

        border-top-color: blueviolet;

        border-bottom-color: aquamarine;

        border-right-width: 2px;

        border-left-width: 3px;

        border-top-width: 4px;

        border-bottom-width: 5px;

        border-right-style: dashed;

        border-left-style: dotted;

        border-top-style: double;

        border-bottom-style: solid;

    }

 <div></div>

这样我们就可以得到一个五彩斑斓的框啦！

勤加练习，明天的你一定会更优秀！

本次的更新就到这里啦，点个关注再走哦！