国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

簡單實用的css邊框屬性border

null1145 / 3473人閱讀

摘要:本文主要講述利用屬性做出不同的幾何形狀從而適用于比較好看的視覺樣式。任意組合就能組成不同的由三角形組成的其它幾何形狀了。

本文主要講述利用border屬性做出不同的幾何形狀從而適用于比較好看的視覺樣式。

預備知識

border相關屬性

border-width 邊框的寬度

border-style 邊框的樣式

border-color 邊框的顏色

案例舉例

為了更加通俗易懂,demo用的是最簡單的dom元素和css屬性

商品介紹
商品評價
.border{
    margin: 50px auto;
    width: 540px;
    font-size:18px;
    line-height: 40px;
    text-align: center;
}
.border-left{
    width: 260px;
    height: 40px;
    background: #f3941d;
    float: left;
    color: #fff;
}
.border-icon{
    width: 0px;
    height: 0;
    border-width: 40 20 0 0;
    border-style: solid;
    border-color: #f3941d #f5d7b7 #f3941d #f3941d;
    float: left;
}
.border-right{
    width: 260px;
    height: 40px;
    float: right;
    background: #f5d7b7;
    color: #aaa;
}

上面的css代碼重點在于左邊較深顏色與右邊較淺顏色中間有一個三角形.border-icon

介紹
.content{
    margin: 60px auto;
    width: 540px;
    height: auto;
    position: relative;
    border-top: 1px solid #ffffd;
}
.border{
    position: absolute;
    margin-top: -15px;
    margin-left: 20px;
}
.text{
    background: #e14340;
    height: 70px;
    width: 60px;
    line-height: 80px;
    color: #fff;
    text-align: center;
}
.small-triangle{
    position: absolute;
    width: 0;
    height: 0;
    border-width: 15px 10px 0px 0px;
    border-style: solid;
    border-color: #fff #c33a37 #ccc #ffffd;
    margin-left: -10px;
}
.big-triangle{
    width: 0;
    height: 0;
    border-width: 8px 30px;
    border-style: solid;
    border-color: #e14340 #e14340 #fff #e14340;
}

上面的css代碼重點在于左邊較深顏色的小三角.small-triangle和底部的三角.big-triangle

原理解析

那么border屬性是如何變化出不同的幾何形狀呢?

.border1{
    width:0; 
    height:0; 
    border-width:20px 20px 20px 20px; 
    border-style:solid; 
    border-color:#aaa #bbb #ccc #ffffd;
}

看看上述樣式產生的是一個什么樣子的內容

我們通過border-width border-color可以任意變化每一條變的寬高,和顏色。
任意組合就能組成不同的由三角形組成的其它幾何形狀了。

更多內容可關注微信公眾號:有一個姑娘在coding
好好學習,快樂編碼

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/115650.html

相關文章

  • CSS實用技巧干貨

    摘要:一使用在菜單上應用取消應用邊框我們通常的做法是先給每個菜單項設置邊框,然后在設置最后一個菜單的邊框為零不過不要這么做,使用偽類來達到同樣的效果當然,你也可以使用或者,但是更加清晰,具有可讀性二使用選擇項目注第一個子元素的 一、使用 :not() 在菜單上應用/取消應用邊框 我們通常的做法是先給每個菜單項設置邊框,然后在設置最后一個菜單的邊框為零 /* add border */...

    tommego 評論0 收藏0
  • CSS3學習筆記

    摘要:在動畫過程中,您能夠多次改變這套樣式。以百分比來規定改變發生的時間,或者通過關鍵詞和,等價于和。為了獲得最佳的瀏覽器支持,您應該始終定義和選擇器。注釋請使用動畫屬性來控制動畫的外觀,同時將動畫與選擇器綁定。CSS3 被劃分為模塊 其中最重要的 CSS3 新增實用模塊包括: 背景和邊框 文本效果 2D/3D 轉換 動畫 多列布局 用戶界面 CSS3 邊框:   用于創建圓角 border...

    wenshi11019 評論0 收藏0
  • 淺談CSS3 box-sizing 屬性 有趣盒模型

    摘要:盒模型的組成大家肯定都懂,由里向外盒模型是有兩種標準的,一個是標準模型,一個是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。盒模型的組成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有兩種標準的,一個是標準模型,一個是IE模型。 ?從上面兩圖不難看出在標準模型中,盒模型的寬高只是內容(content)的寬高, 而在IE模型中盒模型...

    K_B_Z 評論0 收藏0
  • 【譯】22個必備CSS小技巧

    摘要:當它被選中時,一個設置在里的編碼的字符將會顯示出來。接著為我們的復選框添加一些動畫效果這里是所有的編碼,以及可以在這里進行體驗。這是一個新的叫做的表達式。設置介于和之間的最大最小值。至今并未得到全面的支持。 原文鏈接:22 Essential CSS Recipes更多譯文將陸續推出,歡迎點贊+收藏+關注我的專欄,未完待續…… 大家好,今天我們將會介紹一些非常實用的CSS小技巧,讓我...

    Cristic 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<