純CSS3實現自定義塗鴉風格的邊框

今天我們要來分享一款基於純css3的自定義邊框應用，看上去它像乙個tooltip控制項，因為下邊框有乙個小三角，就像很多地方的引用文字框一樣。另外這款css3邊框是塗鴉風格的，看起來很有個性。用css3實現自定義邊框的好處是可以自適應邊框內部的文字數量大小。

下面我們來分享一下實現的方法，主要由html**和css**組成。

css3簡單實現塗鴉風格邊框 welcome to

html**結構非常簡單，僅僅是3個div組成，當然後面的css**才是關鍵，我們一步步來解說一下。

.wrap

這個css**定義了最外面的邊框，利用border-radius實現邊框的圓角效果，同時利用了box-shadow實現類微微的陰影效果，不是很明顯，你也可以修個屬性值來讓陰影變得更加明顯一點。

.box

.box:before

這個box類和之前的類似，不過多了乙個特性，就是利用css3的:before屬性實現了下邊框的小三角效果，這樣就有tooltip的效果了。

.box .box

.box .box:before

這是最內部的box，和它外面那層box實現一樣，同樣利用before屬性實現小三角效果。

其他就是一些邊框線顏色和背景顏色的設定，就非常簡單了

知識點：

border-radius: none | [/]

border-radius是一種縮寫方法。如果反斜槓符號「/」存在，「/」前面的值是設定元素圓角的水平方向半徑，「/」後面的值是設定元素圓角的垂直方向的半徑；如果沒有「/」，則元素圓角的水平和垂直方向的半徑值相等。另外四個值是按照top-left、top-right、bottom-right和bottom-left順序來設定的，其主要會有以下四種情形出現。

1）border-radius:設定乙個值，top-left、top-right 、bottom-right和bottom-left四個值相等，也就是元素四個圓角效果一樣。

2）border-radius:設定兩個值，top-left等於 bottom-right，並且取第乙個值；top-right等於bottom-left，並且取第二值。也就是元素的左上角和右下角取第乙個值，右上角和左下角取第二個值。

3）border-radius:設定三個值，第乙個值設定top-left，第二個值設定top-right和bottom-left，第三個值設定bottom-right。

4）border-radius:元素四個圓角取不同的值，第乙個值設定top-left，第二個值設定top-right，第三個值設定bottom-right，最後乙個值設定bottom-left。

border-radius的屬性引數非常簡單，主要包含兩個值。

none：預設值，表示元素沒有圓角。

：由浮點數字和單位識別符號組成的長度值。不可以是負值。

注意如果要重置元素沒有圓角，取值none並無效果，需要將元素的border-radius取值為0。

border-radius和border屬性一樣，可以將各個角單獨拆分出來。這樣border-radius就派生出另外四個子屬性，而且它們都是先y軸再x軸。

border-top-left-radius：/；定義元素左上角圓角。

border-top-right-radius：/；定義元素右上角圓角。

border-bottom-right –radius ：/；定義元素右下角圓角。

border-bottom-left-radius：/；定義元素左下角圓角。

上面四個子屬性取值和border-radius是一樣的，只不過水平和垂直方向僅乙個值，「/」前面的值為水平方向半徑，後面的值為垂直方向半徑。如果第二個值省略，元素水平和垂直方向半徑，其實就是以「」為半徑的四分之一圓。如果任意乙個值為「0」，這個角就不是圓角。

純CSS3實現自定義塗鴉風格的邊框

純CSS3實現自定義塗鴉風格的邊框

純CSS3實現自定義塗鴉風格的邊框

純css3自定義滾動條

相關推薦