整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          容器邊框圖片的細(xì)節(jié)要求,CSS3屬性的瀏覽器兼容性設(shè)置,新手必學(xué)

          一篇文章中,小海前端(頭條號)為小伙伴們介紹了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é)要求:

          切片偏移之和與圖片寬高的關(guān)系

          當(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í)體效果圖

          切片偏移量與圖片寬高的關(guān)系

          當(dāng)切片的上下偏移量都大于等于圖像的高度,且左右偏移量都大于等于圖像的寬度。則容器的四個(gè)角可以獲得完整的邊框圖像。

          CSS代碼如下所示:

          border-image:url(../images/ball.jpg) 90 100 120 130/30px round

          上述代碼指出,上切片尺寸為90像素,右切片尺寸為100像素,下切片尺寸為120像素,左切片尺寸為130像素。每一個(gè)方向的切片偏移量均大于等于圖片90像素的寬度和高度值。因此容器的四個(gè)角可以獲得完整的邊框圖像。同樣,邊依然無法得到任何切片圖像。

          最終效果如下圖所示:

          實(shí)體效果圖

          邊框圖片中5號圓形的顯示與隱藏

          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)持的走下去。

          文章預(yù)告

          下一篇文章中,小海前端(頭條號)會為小伙伴們講解CSS3中實(shí)現(xiàn)多列布局的屬性。這組屬性解決了在CSS2時(shí)必須要對容器進(jìn)行浮動才能在一行內(nèi)顯示多列的問題。希望小伙伴們不要錯(cuò)誤。

          SS3 的邊框?qū)傩钥梢越o創(chuàng)建圓角的盒子,也可以給盒子設(shè)置陰影,用圖片美化盒子。

          border-radius 圓角

          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 邊框陰影

          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 圖片

          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ū)留言討論


          主站蜘蛛池模板: 3D动漫精品啪啪一区二区下载| 97精品国产一区二区三区 | 性色AV 一区二区三区| 国产精品高清一区二区三区| 日美欧韩一区二去三区| 中文字幕久久久久一区| 国产一区二区三区视频在线观看| 久久精品国产AV一区二区三区| 免费无码一区二区| 国产未成女一区二区三区| 一区二区在线视频| 国产精华液一区二区区别大吗 | 久久久国产精品无码一区二区三区| 东京热人妻无码一区二区av| 亚洲第一区精品日韩在线播放| 毛片一区二区三区| 日产精品久久久一区二区| 麻豆精品久久久一区二区| 国模大尺度视频一区二区| 亚洲Aⅴ无码一区二区二三区软件| 国模无码视频一区| 国产视频一区二区| 日韩AV无码一区二区三区不卡 | 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 亚洲永久无码3D动漫一区| 国产在线精品一区在线观看| 国产大秀视频一区二区三区 | 中文字幕一区二区三区免费视频| 亚洲国产成人久久一区WWW | 亚洲一区二区三区不卡在线播放| 精品伦精品一区二区三区视频| 日本人真淫视频一区二区三区| 久久久精品人妻一区二区三区蜜桃| 精品一区二区三区在线成人| 内射女校花一区二区三区| 中文字幕在线无码一区| 香蕉视频一区二区| 午夜福利av无码一区二区| 在线日产精品一区| 国产一区二区免费在线| 国产在线视频一区|