CSS3 邊框樣式

border-radius

作用：設(shè)置圓角

值的個數(shù)及其效果

簡記：左上開始順時針，值不夠的對角來湊。

圓角與橢圓角

語法：

border-radius: 50px/15px;	/* 橫向半徑/縱向半徑*/

示例：

box-shadow

作用：設(shè)置邊框陰影

語法：

box-shadow: h-shadow v-shadow blur spread color inset;

本文不包括如何計算模糊半徑的精確算法，但是，它詳細(xì)說明如下：對于長而直的陰影邊緣，它會創(chuàng)建一個過渡顏色用于模糊 以陰影邊緣為中心、模糊半徑為半徑的局域，過渡顏色的范圍在完整的陰影顏色到它最外面的終點的透明之間。詳細(xì)可以了解數(shù)字圖像處理算法.

border-image

作用：設(shè)置邊框圖片化樣式

語法：

border-image: source slice width outset repeat|initial|inherit;

注意點：

• 在設(shè)置 border-image屬性之前，須要先設(shè)置 border屬性
• 在設(shè)置border-image屬性時，好像僅可以同時設(shè)置border-image-source、 border-image-slice以及border-image-repeat三個屬性，border-image-outset屬性需要單獨設(shè)置，至于為什么沒有提border-image-width屬性呢，因為如下
• 在設(shè)置border屬性時已經(jīng)設(shè)置了一個邊框的寬度，如果只設(shè)置了 border 屬性，并且沒有使用 border-image，那么 border 屬性中的寬度值將直接應(yīng)用于邊框。如果同時使用了 border-image-width，border-image-width 將定義圖像邊框的寬度，而 border 屬性中的寬度值將被忽略。
• 同時，border 屬性的寬度可以被繼承，而 border-image-width 不會被繼承，因為它是與特定圖像邊框相關(guān)聯(lián)的屬性。
• 當(dāng)使用漸變作為border-image時，border會呈現(xiàn)于background-color一樣的漸變，slice的值范圍為 0.5-209（可能與寬度有關(guān)，但是沒有詳細(xì)測試）時，會鋪滿整個邊框，而且值越大，中間部分的占比就越大）

詳解border-image-slice

? 其有1~4個參數(shù)，其方位規(guī)則符合CSS普遍的方位規(guī)則（與margin，padding等或border-width一致），上右下左順時針，再賦予剪裁的含義，舉個簡單的例子，前面提到，支持百分比寬度，所以這里“30% 35% 40% 30%的”示意可以用下圖表示：

? 看圖說話就是，離圖片上部30%的地方剪裁一下，在右邊35%的地方剪裁一下，在離底部40%的地方裁剪一下，在距左邊30%的地方也剪裁一下。于是總共對圖片進(jìn)行了“四刀切”，形成了九個分離的區(qū)域，這就是九宮格。由此獲取的四個角的形狀與添加border-image屬性的盒子的四個角是保持一致的，雖然有可能會縮放。

詳解border-image-repeat

? 主要對 repeat 和 round 進(jìn)行區(qū)別：

? repeat：簡單的重復(fù)，按照對應(yīng)區(qū)域的原大小直接進(jìn)行復(fù)制，到最后占不下了就直接隱藏，如下：

? round：對原區(qū)域的圖形進(jìn)行合理縮放之后，再復(fù)制縮放之后的圖形，使之能夠剛剛鋪滿整個區(qū)域，而不會出現(xiàn)以上的“殘缺”，如下：

參考文章：

點擊此處查看大神文章

到此這篇關(guān)于CSS3 邊框樣式(包含border-radius、border-image與box-shadow)的文章就介紹到這了,更多相關(guān)CSS3 邊框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！