詳解CSS3 邊框樣式(包含border-radius、border-image與box-shadow)

發(fā)布時(shí)間：2024-08-29 16:02:27 作者：懶羊羊大王呀

我要評(píng)論

這篇文章主要介紹了CSS3 邊框樣式(包含border-radius、border-image與box-shadow)的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，,需要的朋友可以參考下

CSS3 邊框樣式

border-radius

作用：設(shè)置圓角

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

簡(jiǎn)記：左上開(kāi)始順時(shí)針，值不夠的對(duì)角來(lái)湊。

值的個(gè)數(shù)	效果
1	四個(gè)角一致
2	左上角和右下角一致，右上角和左下角一致
3	左上角、右上角和左下角一致、右下角
4	左上角、右上角、右下角、左下角

圓角與橢圓角

語(yǔ)法：

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

示例：

box-shadow

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

語(yǔ)法：

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

值	說(shuō)明	值的類型
h-shadow	必需的。水平陰影的位置。允許負(fù)值	數(shù)字,無(wú)需單位,默認(rèn)(px)
v-shadow	必需的。垂直陰影的位置。允許負(fù)值	數(shù)字,無(wú)需單位,默認(rèn)(px)
blur	可選。模糊距離	像素值
spread	可選。陰影的大小。如果 blur 與 spread 只有一個(gè)的話，那么這個(gè)是 blur（模糊距離）。	像素值
color	可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表	字符串
inset	可選。從外層的陰影（開(kāi)始時(shí)）改變陰影內(nèi)側(cè)陰影	inset/空

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

border-image

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

語(yǔ)法：

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

值	描述	值的類型
border-image-source	圖像源	字符串
border-image-slice	圖像從上邊界、右邊界、下邊界、左邊界向內(nèi)偏移的值	數(shù)字(在border-image為url引入的圖片或者是定義的漸變時(shí)效果不同，在前者表示像素值，后者表示比例)/百分比，可以是1-4個(gè)，從上邊界開(kāi)始順時(shí)針，不夠的對(duì)面的值來(lái)湊
border-image-width	圖像邊界的寬度	帶單位的數(shù)字，可以是0-4個(gè)，從上邊界開(kāi)始順時(shí)針，不夠的對(duì)面的值來(lái)湊
border-image-outset	用于指定在邊框外部繪制 border-image-area 的量(可選)	數(shù)字(寬度的倍數(shù))/帶單位的數(shù)字，正值向外，負(fù)值向內(nèi)，可以是0-4個(gè)，從上邊界開(kāi)始順時(shí)針，不夠的對(duì)面的值來(lái)湊
border-image-repeat	用于設(shè)置圖像邊界是否應(yīng)重復(fù)（repeat）、拉伸（stretch）或鋪滿（round）。	空/strecth/repeat/round/initial(恢復(fù)默認(rèn))/inherit(繼承)，0-2個(gè)，0個(gè)默認(rèn)水平豎直都是stretch，1個(gè)是水平默認(rèn)都是該值，2個(gè)：前者水平方向，后者豎直方向

注意點(diǎn)：

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

詳解border-image-slice

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

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

詳解border-image-repeat

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

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

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

參考文章：

點(diǎn)擊此處查看大神文章

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