資訊專欄INFORMATION COLUMN
摘要：上下左右邊框可以使用下面的代碼很好的顯示出這四個邊框下圖對應(yīng)上面的樣式即可顯示這四個邊框到底是如何搭配的可以發(fā)現(xiàn)在邊角處，兩個邊框平分所占面積。
上、下、左、右邊框
可以使用下面的代碼很好的顯示出這四個邊框：
.demo-1{
width: 100px;
height: 100px;
border-left: 50px solid gray;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-top: 50px solid black;
}
下圖對應(yīng)上面的樣式即可顯示這四個邊框到底是如何搭配的：
可以發(fā)現(xiàn)在邊角處，兩個邊框平分所占面積。
正方形將上面代碼中的.demo-1的width和height設(shè)置為0：
.demo-1{
width: 0;
height: 0;
border-left: 50px solid gray;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-top: 50px solid black;
}
即可顯示一個正方形：
上三角很顯然，作出上三角很簡單了，另border-left和border-right的顏色為透明，不設(shè)置border-top：
.demo-1 {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
}
即可顯示上三角：
其它簡單的圖形可以設(shè)置上、下、左、右邊框的屬性自由組合圖形的樣式。
偽類before和afterw3c對這兩個偽類的定義：
:after 選擇器在被選元素的內(nèi)容后面插入內(nèi)容
:before 選擇器在被選元素的內(nèi)容前面插入內(nèi)容
請使用 content 屬性來指定要插入的內(nèi)容。
使用before和after創(chuàng)建組合圖形通過使偽類、定位可以創(chuàng)建出一下效果的圖形：
作出一個長方形的div代碼：
.hot {
background-color: #cc0000;
width: 100;
height: 50px;
position: relative;
text-align: center;
}
效果見下：
使用偽類before插入箭頭代碼：
.hot:before {
position: absolute;
width: 0;
height: 0;
content: "";
bottom: -12px;
left: 15px;
border-top: 12px solid #cc0000;
border-left: 0px solid transparent;
border-right: 12px solid transparent;
}
注意這里使用absolute定位
效果見下：
.hot:after {
content: "頭條";
color: #fff;
font-size: 39px;
line-height: 50px;
font-family: "楷體";
font-weight: bold;
}
最終效果：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115056.html
摘要：盒模型要點知識務(wù)必注意看，這可是前端面試必定會遇到的問題。盒模型的主要屬性，除繼承外有兩個值這里不再細說歷史原因，只說其作用。嚴格來說與標簽大小無關(guān)，但是影響視覺上的位置。具象化需調(diào)試指出，如下其中的最外圈的黃色區(qū)域就是了。 盒模型要點知識 務(wù)必注意看，這可是前端面試 必定會遇到 的問題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個值： content-box...
摘要：盒模型要點知識務(wù)必注意看，這可是前端面試必定會遇到的問題。盒模型的主要屬性，除繼承外有兩個值這里不再細說歷史原因，只說其作用。嚴格來說與標簽大小無關(guān)，但是影響視覺上的位置。具象化需調(diào)試指出，如下其中的最外圈的黃色區(qū)域就是了。 盒模型要點知識 務(wù)必注意看，這可是前端面試 必定會遇到 的問題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個值： content-box...
摘要：盒模型，盒模型看待元素的一種方式，它將每個元素看作由一個盒子表示。盒子實際占用的大小是左左右右，屬性細節(jié)一個塊元素的默認寬度是，表示它會自動延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對和指定顏色，添加任何裝飾。 盒模型 1，盒模型： CSS看待元素的一種方式，它將每個元素看作由一個盒子表示。 2，五個屬性： 從內(nèi)往外： width:內(nèi)容的寬度，而不是盒子的寬度； hei...
閱讀 1460·2021-11-22 14:44
閱讀 2843·2021-11-16 11:44
閱讀 3206·2021-10-13 09:40
閱讀 1980·2021-10-08 10:04
閱讀 2363·2021-09-24 10:28
閱讀 2909·2021-09-06 15:02
閱讀 2957·2019-08-30 15:52
閱讀 2392·2019-08-30 13:20
