什么是CSS#

CSS(Cascading Style Sheets的縮寫)，翻譯為“層疊樣式表”或“級聯(lián)樣式表”，簡稱樣式表。

CSS的主要作用#

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

CSS3 邊框

CSS3 邊框#

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

您將學到以下邊框屬性：border-radius、box-shadow、border-image。

一、圓角邊框border-radius#

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

1.1、border-radius語法#

基本寫法如下：

設置左上角

border-top-left-radius:10px;

設置右上角

border-top-right-radius:10px;

設置左下角

border-bottom-left-radius:10px;

設置左下角

border-bottom-right-radius:10px;

簡寫設置四個角

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

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

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

border-radius:10px;

支持百分比

border-radius:100%;

支持em

border-radius:2em;

支持運算

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

JavaScript語法

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

1.2瀏覽器兼容性#

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

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

-moz-border-radius:5px;

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

-ms-border-radius: 5px;

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

-o-border-radius: 5px;

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

border-radius:10px;

總結

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

最新評論