成長小筆記

css3中的boder

簡單來講就是咱們常常用的邊框，你們確定都知道它的做用了，一個很是基礎的用法

還能夠定義各類奇形怪狀的邊框類型， 能夠單獨設它的上下左右邊框

css樣式

border:20px solid;  
border-left-color:orangered;
border-top-color:brown;
border-right-color:cornflowerblue;
border-bottom-color:green;

效果以下：

若是不給上圖div的寬和高的話，就會是下面這種狀況：

用boder畫三角形

能夠在上述的代碼中進行一些修改
加上

border-width: 15px 0 15px 30px;
border-style: solid;
border-color:orangered green;

就有如下的效果：

距離造成三角形還差一步，哈哈，這個時候要用上透明來實現

border-top-color:transparent ;
border-bottom-color: transparent;

根據本身的須要進行調節

用boder畫數字8

仍是直接看樣式吧

css樣式

.circle_1{
        margin: 100px auto;
        width: 20px;
        height: 20px;
        line-height: 80px;
        background: white;
        border:5px solid cadetblue;
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        transform: rotate(-45deg);
    }
    .circle_1::after{
        content: "";
        position: absolute;
        top: 22px;
        left: 20px;
        width: 20px;
        height: 20px;
        border:5px solid cadetblue;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        transform: rotate(96deg);
    }

html部分

<div class="box_">
    <div class="circle_1"></div>
</div>

效果如圖顯示

總結

看了這篇文章有沒有以爲border頗有趣呢，生活中常見的一些形狀均可以用它來實現喲。 能用border作的形狀能夠不用再用圖片來代替了