在實(shí)現(xiàn)頁(yè)面五花八門的有特色的ui時(shí)，我們有時(shí)會(huì)遇到要用實(shí)現(xiàn)一個(gè)弧形，而這樣的弧形要怎么實(shí)現(xiàn)呢？用圖片？不太優(yōu)雅，這樣就要無(wú)故多加載一張圖片了，這里來(lái)說(shuō)說(shuō)怎么用css的after偽類來(lái)實(shí)現(xiàn)弧形。

總思路：

寫一個(gè)主元素，并給該元素添加偽類來(lái)設(shè)置成圓，取該圓的一部分來(lái)作為我們看到的圓弧。

要點(diǎn)：

我們看到的圓弧實(shí)質(zhì)是偽元素(圓)的一部分，所以主元素應(yīng)該是透明的，顏色值設(shè)置在偽元素上；

既然是主元素和偽元素，那么就應(yīng)該主元素設(shè)置相對(duì)定位(relative)，偽元素設(shè)置絕對(duì)定位(absolute)于主元素;

偽元素寬度可以超過(guò)主元素，這時(shí)最好讓偽元素相對(duì)于主元素居中，這樣展現(xiàn)出來(lái)的圓弧才能左右對(duì)稱；

如果偽元素寬度超過(guò)主元素，需要設(shè)置主元素超出隱藏(overflow:hidden)，這樣才不會(huì)出現(xiàn)橫向滾動(dòng)條；

偽類可以設(shè)置成正圓(border-radius: 50%) 也可以是橢圓(border-radius: top right bottom left)；

既然是背景裝飾，可以把主元素的層級(jí)設(shè)置底一些(z-index: -1)；

具體實(shí)現(xiàn):

第一種(正圓弧)：

*{margin: 0;padding: 0;}

.bg_arc{

width: 100%;

height: 400px;

position: relative;

z-index: -1;

overflow: hidden;

/*background: #ddd;*/

}

.bg_arc::after{

content: '';

display: block;

width: 160%;

height: 200%;

border-radius: 50%;

position: absolute;

left: 50%;

top: -100%;

transform: translateX(-50%);

background: #1677D2;

}

實(shí)現(xiàn)效果：

正圓弧

參照上面的要點(diǎn)，大概也能知道個(gè)原理了吧。看到的圓弧高度等于主元素高度，偽元素絕對(duì)于主元素定位，左右居中，上移100%；圓弧弧度取決于偽類的寬度，這點(diǎn)放到這里來(lái)說(shuō)，是怕放在上面說(shuō)反而讓人覺(jué)得復(fù)雜了。

如果還不理解的話，可以把上面不必要的樣式注釋掉，輔助理解:

*{margin: 0;padding: 0;}

.bg_arc{

width: 100%;

height: 400px;

position: relative;

/*z-index: -1;*/

/*overflow: hidden;*/

background: #ddd;

}

.bg_arc::after{

content: '';

display: block;

/*width: 120%;*/

width: 100%;

height: 200%;

border-radius: 50%;

position: absolute;

/*left: 50%;*/

/*top: -100%;*/

/*transform: translateX(-50%);*/

background: #1677D2;

}

效果：

輔助理解

可以多調(diào)調(diào)高度寬度來(lái)幫助理解。

第二種(有角度的弧)：

*{margin: 0;padding: 0;}

.bg_arc{

width: 100%;

height: 400px;

position: relative;

z-index: -1;

overflow: hidden;

}

.bg_arc::after{

content: '';

display: block;

width: 100%;

height: 400px;

position: absolute; /* 不同點(diǎn)1 */

left: 0;

top: 0;

border-radius: 0 0 50% 50%; /* 不同點(diǎn)2 */

background: #fcc;

}

效果圖：

角度弧

實(shí)現(xiàn)角度弧的思路與正圓弧差不多，不同地方是：

不同點(diǎn)1. 偽元素大小與主元素一樣，覆蓋在主元素上；

不同點(diǎn)2. 設(shè)置偽元素的單個(gè)角度；

總結(jié)

以上是生活随笔為你收集整理的css 外弧_css 伪类实现弧形的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。