一篇文章中,小海前端(頭條號)為小伙伴們介紹了CSS3中新增的border-image屬性,該屬性主要用于為容器的邊框添加圖片。本篇文章,繼續(xù)為大家講解該屬性的用法和CSS3中對該屬性的一些細(xì)節(jié)要求。
尚未閱讀上一篇文章的小伙伴請先閱讀上一篇文章,上一篇文章講解了border-image屬性及其派生屬性的基礎(chǔ)用法。
承接文章:為容器的邊框添加圖片,CSS3新增的邊框圖片屬性,一種新穎的用法
技術(shù)等級:中級 | 適合有一定的CSS基礎(chǔ)的人士閱讀。
該組屬性的兼容性暫時(shí)還不是特別好,建議大家使用火狐瀏覽器(Firefox)來嘗試該屬性的各個(gè)效果。
希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號,因?yàn)檫@些文章都是連載的,并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀,你一定會學(xué)到對你有用的知識。
本篇文章涉及到的CSS3屬性問題:
border-image-slice屬性的使用細(xì)節(jié)
border-outset屬性的用法
border-image-width屬性和border-width屬性的區(qū)別
border-image屬性和border屬性的沖突性
各個(gè)瀏覽器內(nèi)核的兼容性
一、border-image-slice屬性的使用細(xì)節(jié):
上一篇文章中講到,border-image-slice是用來設(shè)置邊框圖片的切片屬性的。該屬性的取值為一個(gè)不帶單位的數(shù)值,默認(rèn)單位為像素,但是不用書寫px。該屬性設(shè)置的數(shù)值可以將邊框圖片劃分為9個(gè)區(qū)域,并貼到邊框的9個(gè)不同位置。
這里還以上一篇文章中寬度和高度均為90像素的圖片為例,該圖片存放在一個(gè)名為images的文件夾中,圖片的文件名為ball.jpg,圖片中每個(gè)圓形的直徑均為30像素。
素材圖 ball.jpg
對于該屬性,CSS3對于它的使用方法還有以下幾個(gè)細(xì)節(jié)要求:
當(dāng)切片的上下偏移之和大于等于圖像的高度,且左右偏移之和大于等于圖像的寬度。則容器只有四個(gè)角可以獲得邊框圖片的切片,而容器的邊無法獲得任何圖片。
CSS代碼如下所示:
border-image:url(../images/ball.jpg) 60 70 50 30/30px round
上述代碼指出,上切片尺寸為60像素,右切片尺寸為70像素,下切片尺寸為50像素,左切片尺寸為30像素。上下切片的偏移之和為110像素,左右切片的偏移之和為100像素,這兩個(gè)值均超過了圖片90像素的寬高尺寸。因此只有容器的四個(gè)角可以得到邊框圖像。最終效果如下圖所示:
實(shí)體效果圖
當(dāng)切片的上下偏移量都大于等于圖像的高度,且左右偏移量都大于等于圖像的寬度。則容器的四個(gè)角可以獲得完整的邊框圖像。
CSS代碼如下所示:
border-image:url(../images/ball.jpg) 90 100 120 130/30px round
上述代碼指出,上切片尺寸為90像素,右切片尺寸為100像素,下切片尺寸為120像素,左切片尺寸為130像素。每一個(gè)方向的切片偏移量均大于等于圖片90像素的寬度和高度值。因此容器的四個(gè)角可以獲得完整的邊框圖像。同樣,邊依然無法得到任何切片圖像。
最終效果如下圖所示:
實(shí)體效果圖
border-image-slice屬性還有一個(gè)可以放在切片數(shù)量后面的取值。當(dāng)具有該取值并設(shè)置為“fill”時(shí),邊框圖片中5號圓形就會顯示在容器的內(nèi)部。如果沒有該取值,邊框圖片中5號圓形就不會顯示在容器內(nèi)部。
CSS代碼如下所示:
border-image:url(../images/ball.jpg) 30 fill/30px round
最終效果如下圖所示:
實(shí)體效果圖
二、border-outset屬性的用法:
該屬性用來對邊框圖像實(shí)現(xiàn)向外擴(kuò)張的效果。該屬性的取值為帶有單位的數(shù)值。同時(shí)該屬性也是可以結(jié)合border-image屬性單獨(dú)使用的。
CSS代碼如下所示:
border-image:url(../images/ball.jpg) 30/30px round
border-outset:30px;
上述代碼會讓邊框圖像在顯示的同時(shí)向外擴(kuò)張30像素。請小伙伴們自行操作并嘗試。
三、border-image-width屬性和border-width屬性的區(qū)別:
border-width屬性可以單獨(dú)使用,適用于設(shè)置具有顏色的邊框?qū)挾取?/p>
border-image-width屬性不可以單獨(dú)使用,必須在border-image屬性取值內(nèi)部固定的位置處使用。該屬性主要用于設(shè)置具有圖像的邊框?qū)挾取?/p>
這兩個(gè)屬性是可以同時(shí)使用的。
當(dāng)容器內(nèi)部具備文本內(nèi)容時(shí),我們發(fā)現(xiàn),文本內(nèi)容出現(xiàn)在了邊框圖片的位置處。為了方便小伙伴們觀察,我把文本內(nèi)容調(diào)整成了黃色。如下圖的左側(cè)部分。
實(shí)體效果圖
此時(shí)調(diào)整border-width屬性,為了讓邊框?qū)挾壬В€需要設(shè)置邊框樣式border-style。為了不讓容器的大小發(fā)生變化,添加box-sizing屬性。為了便于查看,我把文本內(nèi)容調(diào)整成了紅色。如上圖右側(cè)部分。
CSS代碼如下所示:
border-image: url(../images/ball.jpg) 30/30px round;
border-width: 30px;
border-style: solid;
box-sizing: border-box;
color:#ff0000;
四、border-image屬性和border屬性的沖突性:
CSS3規(guī)定,帶有顏色的邊框和邊框圖片不得同時(shí)存在,并且當(dāng)border-image屬性和border屬性同時(shí)存在時(shí),border-image是不起作用的。
CSS代碼如下所示。
border-image:url(../images/ball.jpg) 30/30px round;
border:solid 10px #ff5857;
上述代碼執(zhí)行后,容器會帶有10像素的邊框,而不帶有邊框圖片。小伙伴們可以自行嘗試。
五、各個(gè)瀏覽器內(nèi)核的兼容性:
CSS3的屬性中還有許多都是瀏覽器不能完全兼容的,有的屬性兼容部分瀏覽器,有的屬性被瀏覽器部分兼容。那么,要對所有的瀏覽器都得到相同的外觀,應(yīng)該如何處理呢?
可以采用為CSS屬性的兼容性前綴來解決這個(gè)問題。
-ms-,適用于具有Trident內(nèi)核的IE系列瀏覽器。
-webkit-,適用于具有webkit內(nèi)核的瀏覽器,例如Safari瀏覽器、360安全瀏覽器等。
-moz-,適用于Firefox瀏覽器。
-o-,適用于Opera瀏覽器。
因此,border-image屬性要實(shí)現(xiàn)瀏覽器全兼容可以使用下列代碼:
border-image:url(../images/ball.jpg) 30/30px round
-webkit-border-image:url(../images/ball.jpg) 30/30px round
-moz-border-image:url(../images/ball.jpg) 30/30px round
-o-border-image:url(../images/ball.jpg) 30/30px round
-ms-border-image:url(../images/ball.jpg) 30/30px round
不過通過實(shí)際操作,我發(fā)現(xiàn)border-image屬性即使加上了瀏覽器兼容性前綴,也不能達(dá)到滿意的效果。CSS3中還有許多屬性都不能達(dá)到最滿意的兼容性,我們只能等待CSS3完備的計(jì)劃出臺,并盡快得到大部分瀏覽器廠商的支持和認(rèn)可。
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章,逐步學(xué)到一定的知識,甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn),每寫一篇時(shí)我都盡量把握好措辭,用簡單易懂的語言描述,同時(shí)精心設(shè)計(jì)版面,讓版面更加豐富,激發(fā)閱讀興趣。所以,每一篇文章可能篇幅不長,但是都要耗費(fèi)小海老師很久的時(shí)間。
希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號,因?yàn)檫@些文章都是連載的,并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀,你一定會學(xué)到對你有用的知識。
關(guān)注“小海前端”,我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章,也希望更多的初學(xué)者跟著學(xué)下去,我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。
下一篇文章中,小海前端(頭條號)會為小伙伴們講解CSS3中實(shí)現(xiàn)多列布局的屬性。這組屬性解決了在CSS2時(shí)必須要對容器進(jìn)行浮動才能在一行內(nèi)顯示多列的問題。希望小伙伴們不要錯(cuò)誤。
SS3 的邊框?qū)傩钥梢越o創(chuàng)建圓角的盒子,也可以給盒子設(shè)置陰影,用圖片美化盒子。
border-radius可以給元素設(shè)置圓角。
如下,一個(gè)div元素:
<div class="box">border-radius可以給元素設(shè)置圓角。</div>
我們給它加一點(diǎn)樣式,并設(shè)置它的border-radius為15px:
.box{
width: 284px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
font-size: 14px;
background: #999;
border:2px solid #333;
border-radius: 15px;
}
瀏覽器中查看效果:
border-radius也可以給它四個(gè)角分別設(shè)置角度,四個(gè)值依次代表左上,右上,右下,左下:
border-radius: 15px 15px 0px 0px;
box-shadow可以為元素設(shè)置邊框陰影。box-shadow設(shè)置的屬性如下:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平陰影的位置,可以是負(fù)值。
v-shadow 垂直陰影的位置,可以是負(fù)值。
blur 模糊距離。
spread 陰影的尺寸。
color 陰影的顏色。
inset 將外部陰影 (outset) 改為內(nèi)部陰影。
以上 h-shadow ,v-shadow是必須要設(shè)置的,其他的可以根據(jù)需要去設(shè)置。
我們給上面的div元素添加陰影:
<div class="box"></div>
css樣式:
.box{
width: 284px;
height: 100px;
background: #f60;
box-shadow: 10px 10px 5px #ccc;
}
瀏覽器中查看效果:
border-image 使用圖片設(shè)置邊框。
如下:
<div class="box"></div>
我們先給div元素的邊框顏色設(shè)置為透明(transparent),然后在使用圖片設(shè)置邊框:
.box{
width: 284px;
height: 100px;
border:15px solid transparent;
width:300px;
padding:10px 20px;
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
}
看一下效果:
童靴們可能不懂為啥屬性的前邊會有-webkit-、-o-這樣的前綴呢?這是因?yàn)楹枚酁g覽器都不支持CSS的新特性,所以寫這些專屬的前綴是為了兼容各瀏覽器。
上一篇CSS3文章最后也講過各瀏覽器的前綴,童靴們自己去看一下。
css3 入門簡介 ——css3開課啦!
當(dāng)你感到悲哀痛苦時(shí),最好是去學(xué)些什么東西。學(xué)習(xí)會使你永遠(yuǎn)立于不敗之地。
關(guān)注小白前端,持續(xù)收到文章推送!
文素材來自于網(wǎng)絡(luò),若與實(shí)際情況不相符或存在侵權(quán)行為,請聯(lián)系刪除。
在搭建公司網(wǎng)站時(shí),會用到一些邊框,無論是表格還是div。布局時(shí),邊框可以作為分割線,對內(nèi)容進(jìn)行對比或偏移。更明顯。使用邊框?qū)嶋H上非常簡單。一是邊框的粗細(xì),二是邊框的顏色。您可以設(shè)置本地和常規(guī)設(shè)置,也可以單獨(dú)設(shè)置上下左右四個(gè)方向的邊框。 CSS中有一個(gè)關(guān)于顏色的屬性:border-color,它一次最多可以接受4個(gè)顏色值。
邊框顏色值:[<顏色>|透明]{1,4} |繼承初始值:未定義速記屬性計(jì)算值:單個(gè)屬性(border-top-color,top-border-color)
如果網(wǎng)頁設(shè)計(jì)的邊界值少于 4 個(gè),則值復(fù)制有效。如果設(shè)計(jì)者希望H1元素有細(xì)的黑色上下邊框和粗的灰色左右邊框,CSS樣式應(yīng)該這樣寫:
h1 { 邊框樣式:實(shí)心;邊框?qū)挾龋杭?xì);邊框顏色:黑灰色;}
當(dāng)然,所有 4 個(gè)頁面都會應(yīng)用一個(gè)顏色值,如果應(yīng)用 4 個(gè)顏色值,那么每個(gè)頁面都會有不同的顏色。可以使用任何類型的顏色值,例如它可以是命名顏色,或十六進(jìn)制和 RGB 值:
p {
邊框樣式:實(shí)心;邊框?qū)挾龋捍郑?/p>
邊框顏色: blackrgb(25%, 25%, 25%) # 808080 銀色;}
您還可以使用快捷方式一次定義多個(gè)邊界,例如為特定段落設(shè)置 P:
P {
border:#cecece1pxsolid;//四個(gè)邊框均為灰色1px
}
還有一些單頁邊框顏色屬性。原理與單頁樣式和寬度屬性相同。網(wǎng)站構(gòu)建者必須為標(biāo)題指定純黑色邊框,正確的邊框是純灰色邊框。這可以指定如下:
P { 邊框樣式:實(shí)心;邊框顏色:黑色;右邊框顏色:灰色;}
邊界四個(gè)方向?qū)?yīng)的屬性名稱:
上邊框上顏色、右邊框右顏色、下邊框下顏色、左邊框左顏色
透明邊框的使用:在某些情況下,網(wǎng)站作者想要創(chuàng)建不可見的邊框。這使得邊框顏色值透明(在 CSS2 中引入)。該值用于創(chuàng)建不可見的寬度邊框。假設(shè)您希望一組 3 個(gè)鏈接具有邊框。默認(rèn)情況下,這些邊框是不可見的,但當(dāng)鼠標(biāo)懸停在鏈接上時(shí),邊框應(yīng)升起。您可以通過在鏈接未懸停時(shí)使邊框透明來實(shí)現(xiàn)此目的:
a:鏈接,a:訪問{
邊框樣式:實(shí)心;邊框?qū)挾龋?px;邊框顏色:透明;}
a:懸停{邊框顏色:灰色;}
使用透明時(shí),邊框的使用可充當(dāng)額外的填充,還有一個(gè)額外的好處,即在需要時(shí)使其可見。此透明邊框充當(dāng)填充,因?yàn)樵氐谋尘把由斓竭吙騾^(qū)域(假設(shè)它是可見背景)。
注意:IE7之前,IE/Win不支持透明。在以前的版本中,IE 會根據(jù)元素的顏色值設(shè)置邊框顏色。
免責(zé)聲明:以上內(nèi)容資料均來源于網(wǎng)絡(luò),本文作者無意針對,影射任何現(xiàn)實(shí)國家,政體,組織,種族,個(gè)人。相關(guān)數(shù)據(jù),理論考證于網(wǎng)絡(luò)資料,以上內(nèi)容并不代表本文作者贊同文章中的律法,規(guī)則,觀點(diǎn),行為以及對相關(guān)資料的真實(shí)性負(fù)責(zé)。本文作者就以上或相關(guān)所產(chǎn)生的任何問題概不負(fù)責(zé),亦不承擔(dān)任何直接與間接的法律責(zé)任。
文章內(nèi)容如涉及作品內(nèi)容、版權(quán)圖片,侵權(quán),謠言或其它問題請聯(lián)系刪除。最后,大家對于這個(gè)事件有什么不同的想法,歡迎評論區(qū)留言討論
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。