什么是CSS#

CSS(Cascading Style Sheets的縮寫(xiě))，翻譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”，簡(jiǎn)稱(chēng)樣式表。

CSS的主要作用#

它主要是用來(lái)給HTML網(wǎng)頁(yè)來(lái)設(shè)置外觀或樣式。外觀或樣式：HTML網(wǎng)頁(yè)中的文字的大小、顏色、字體，網(wǎng)頁(yè)的背景顏色、背景圖片。

CSS3 邊框

CSS3 邊框#

通過(guò) CSS3，您能夠創(chuàng)建圓角邊框，向矩形添加陰影，使用圖片來(lái)繪制邊框 - 并且不需使用設(shè)計(jì)軟件，比如 PhotoShop。

您將學(xué)到以下邊框?qū)傩裕篵order-radius、box-shadow、border-image。

一、圓角邊框border-radius#

在 CSS3 中，border-radius 屬性用于創(chuàng)建圓角：

1.1、border-radius語(yǔ)法#

基本寫(xiě)法如下：

設(shè)置左上角

border-top-left-radius:10px;

設(shè)置右上角

border-top-right-radius:10px;

設(shè)置左下角

border-bottom-left-radius:10px;

設(shè)置左下角

border-bottom-right-radius:10px;

簡(jiǎn)寫(xiě)設(shè)置四個(gè)角

執(zhí)行順序如下: 左上-右上-右下-左下

border-radius:1px 2px 3px 4px;

設(shè)置四角值統(tǒng)一

border-radius:10px;

支持百分比

border-radius:100%;

支持em

border-radius:2em;

支持運(yùn)算

border-radius:30px/30px; /*支持加和除 其余的不支持*/

JavaScript語(yǔ)法

document.getElementsByTagName("div")[0].style.borderRadius = "25px";

1.2瀏覽器兼容性#

-webkit：代表Webkit枘核瀏覽器，如chrome and safari私有屬性或內(nèi)核識(shí)別碼。

-webkit-border-radius:5px; -moz：代表Firefox瀏覽器私有屬性或內(nèi)核識(shí)別碼。

-moz-border-radius:5px;

ms代表ie瀏覽器私有屬性或內(nèi)核識(shí)別碼。

-ms-border-radius: 5px;

-o-代表歐朋opera瀏覽器私有屬性或內(nèi)核識(shí)別碼。

-o-border-radius: 5px;

IE9+、Firefox 4+、Chrome、Safari 5+以及 Opera支持 border-radius 屬性。

border-radius:10px;

總結(jié)

以上所述是小編給大家介紹的CSS3 邊框效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論