怎么在CSS3中實現一個邊框效果

怎么在CSS3中實現一個邊框效果？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

什么是CSS#

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

CSS的主要作用#

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

CSS3 邊框

CSS3 邊框#

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

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

一、圓角邊框border-radius#

在 CSS3 中，border-radius 屬性用于創建圓角：

1.1、border-radius語法#

基本寫法如下：

設置左上角

border-top-left-radius:10px;

設置右上角

border-top-right-radius:10px;

設置左下角

border-bottom-left-radius:10px;

設置左下角

border-bottom-right-radius:10px;

簡寫設置四個角

執行順序如下: 左上-右上-右下-左下

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

設置四角值統一

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私有屬性或內核識別碼。

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

-moz-border-radius:5px;

ms代表ie瀏覽器私有屬性或內核識別碼。

-ms-border-radius: 5px;

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

-o-border-radius: 5px;

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

border-radius:10px;

看完上述內容，你們掌握怎么在CSS3中實現一個邊框效果的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！