在實現頁面五花八門的有特色的ui時，我們有時會遇到要用實現一個弧形，而這樣的弧形要怎么實現呢？用圖片？不太優雅，這樣就要無故多加載一張圖片了，這里來說說怎么用css的after偽類來實現弧形。

總思路：

寫一個主元素，并給該元素添加偽類來設置成圓，取該圓的一部分來作為我們看到的圓弧。

要點：

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

既然是主元素和偽元素，那么就應該主元素設置相對定位(relative)，偽元素設置絕對定位(absolute)于主元素;

偽元素寬度可以超過主元素，這時最好讓偽元素相對于主元素居中，這樣展現出來的圓弧才能左右對稱；

如果偽元素寬度超過主元素，需要設置主元素超出隱藏(overflow:hidden)，這樣才不會出現橫向滾動條；

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

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

具體實現:

第一種(正圓弧)：

*{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;

}

實現效果：

正圓弧

參照上面的要點，大概也能知道個原理了吧。看到的圓弧高度等于主元素高度，偽元素絕對于主元素定位，左右居中，上移100%；圓弧弧度取決于偽類的寬度，這點放到這里來說，是怕放在上面說反而讓人覺得復雜了。

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

*{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;

}

效果：

輔助理解

可以多調調高度寬度來幫助理解。

第二種(有角度的弧)：

*{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; /* 不同點1 */

left: 0;

top: 0;

border-radius: 0 0 50% 50%; /* 不同點2 */

background: #fcc;

}

效果圖：

角度弧

實現角度弧的思路與正圓弧差不多，不同地方是：

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

不同點2. 設置偽元素的單個角度；

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。