首頁 > web前端 > css教學 > css中border(邊框) 屬性特性的介紹

css中border(邊框) 屬性特性的介紹

不言
發布: 2018-08-21 11:41:09
原創
2225 人瀏覽過

這篇文章帶給大家的內容是關於css中border(邊框) 屬性特點的介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

簡寫順序:width-style-color

eg:p{border:1px solid red;}

以簡寫順序依序介紹每個屬性特點:

一、border-width:medium(預設。中):thin;thick;thick;length;inherit;

二、border-style:none(預設。無);hidden(與none相同,應用於表時除外,對於表用於解決邊框衝突);dotted(點狀邊框);dashed(虛線)、solid(實線);double(雙線);groove(3D凹槽); ridge(3D壟斷);inset(3D嵌入);outset(3D突出);inherit;

三、border-color:color(name,16進制,rgb);transparent:inherit.

四、border-radius:0(預設值);length(px);%;

 還可以分開賦值:border-top-left-radius;border-top-right-radius; border-bottom-left-radius;border-bottom-right-radius;

五、border-image:source slice width outset repeat;省略的值為它們的預設值

eg:

div{
    border-image:url(img.png) 30 30 round;
    -webkit-border-image:url(img.png) 30 30 round;/*safari 5 and older*/
    -o-border-image:url(img.png) 30 30 round;/*Opera*/
}
登入後複製

六、box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2)

0.2表示透明度

註解:ie9 支援border-radius和box-shadow屬性;firefox、chrome、opera以及safafi支援所有新邊框屬性(即:border-radius;border-image和box-shadow);對於border-image,safari5以及更老的版本需要前綴-webkit-, opera需要前綴-o-;

相關建議:

關於css中的border-collapse_html/css_WEB-ITnose

#CSS border-left-color屬性_html/css_WEB-ITnose

#

以上是css中border(邊框) 屬性特性的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板