怎么在CSS3中實(shí)現(xiàn)一個(gè)邊框效果？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、即墨ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的即墨網(wǎng)站制作公司

什么是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;

看完上述內(nèi)容，你們掌握怎么在CSS3中實(shí)現(xiàn)一個(gè)邊框效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！