介紹
資訊專欄INFORMATION COLUMN
摘要：本文主要講述利用屬性做出不同的幾何形狀從而適用于比較好看的視覺(jué)樣式。任意組合就能組成不同的由三角形組成的其它幾何形狀了。
本文主要講述利用border屬性做出不同的幾何形狀從而適用于比較好看的視覺(jué)樣式。
預(yù)備知識(shí)
border相關(guān)屬性
border-width 邊框的寬度
border-style 邊框的樣式
border-color 邊框的顏色
案例舉例
為了更加通俗易懂，demo用的是最簡(jiǎn)單的dom元素和css屬性
商品介紹商品評(píng)價(jià)
.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代碼重點(diǎn)在于左邊較深顏色與右邊較淺顏色中間有一個(gè)三角形.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代碼重點(diǎn)在于左邊較深顏色的小三角.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;
}
看看上述樣式產(chǎn)生的是一個(gè)什么樣子的內(nèi)容
我們通過(guò)border-width border-color可以任意變化每一條變的寬高，和顏色。
任意組合就能組成不同的由三角形組成的其它幾何形狀了。
更多內(nèi)容可關(guān)注微信公眾號(hào)：有一個(gè)姑娘在coding
好好學(xué)習(xí)，快樂(lè)編碼
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115650.html
摘要：一使用在菜單上應(yīng)用取消應(yīng)用邊框我們通常的做法是先給每個(gè)菜單項(xiàng)設(shè)置邊框，然后在設(shè)置最后一個(gè)菜單的邊框?yàn)榱悴贿^(guò)不要這么做，使用偽類來(lái)達(dá)到同樣的效果當(dāng)然，你也可以使用或者，但是更加清晰，具有可讀性二使用選擇項(xiàng)目注第一個(gè)子元素的 一、使用 :not() 在菜單上應(yīng)用/取消應(yīng)用邊框 我們通常的做法是先給每個(gè)菜單項(xiàng)設(shè)置邊框，然后在設(shè)置最后一個(gè)菜單的邊框?yàn)榱? /* add border */...
摘要：在動(dòng)畫過(guò)程中，您能夠多次改變這套樣式。以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞和，等價(jià)于和。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義和選擇器。注釋請(qǐng)使用動(dòng)畫屬性來(lái)控制動(dòng)畫的外觀，同時(shí)將動(dòng)畫與選擇器綁定。CSS3 被劃分為模塊 其中最重要的 CSS3 新增實(shí)用模塊包括： 背景和邊框 文本效果 2D/3D 轉(zhuǎn)換 動(dòng)畫 多列布局 用戶界面 CSS3 邊框: 用于創(chuàng)建圓角 border...
摘要：盒模型的組成大家肯定都懂，由里向外盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。盒模型的組成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是IE模型。 ?從上面兩圖不難看出在標(biāo)準(zhǔn)模型中，盒模型的寬高只是內(nèi)容（content）的寬高， 而在IE模型中盒模型...
摘要：當(dāng)它被選中時(shí)，一個(gè)設(shè)置在里的編碼的字符將會(huì)顯示出來(lái)。接著為我們的復(fù)選框添加一些動(dòng)畫效果這里是所有的編碼，以及可以在這里進(jìn)行體驗(yàn)。這是一個(gè)新的叫做的表達(dá)式。設(shè)置介于和之間的最大最小值。至今并未得到全面的支持。 原文鏈接：22 Essential CSS Recipes更多譯文將陸續(xù)推出，歡迎點(diǎn)贊+收藏+關(guān)注我的專欄，未完待續(xù)…… 大家好，今天我們將會(huì)介紹一些非常實(shí)用的CSS小技巧，讓我...
閱讀 3517·2023-04-25 15:52
閱讀 587·2021-11-19 09:40
閱讀 2612·2021-09-26 09:47
閱讀 1034·2021-09-22 15:17
閱讀 3557·2021-08-13 13:25
閱讀 2231·2019-08-30 15:56
閱讀 3472·2019-08-30 13:56
閱讀 2110·2019-08-30 11:27
