在實現(xiàn)頁面五花八門的有特色的ui時，我們有時會遇到要用實現(xiàn)一個弧形，而這樣的弧形要怎么實現(xiàn)呢？用圖片？不太優(yōu)雅，這樣就要無故多加載一張圖片了，這里來說說怎么用css的after偽類來實現(xiàn)弧形。
總思路：
寫一個主元素，并給該元素添加偽類來設(shè)置成圓，取該圓的一部分來作為我們看到的圓弧。
要點：
- 我們看到的圓弧實質(zhì)是偽元素(圓)的一部分，所以主元素應(yīng)該是透明的，顏色值設(shè)置在偽元素上；
- 既然是主元素和偽元素，那么就應(yīng)該主元素設(shè)置相對定位(relative)，偽元素設(shè)置絕對定位(absolute)于主元素;
- 偽元素寬度可以超過主元素，這時最好讓偽元素相對于主元素居中，這樣展現(xiàn)出來的圓弧才能左右對稱；
- 如果偽元素寬度超過主元素，需要設(shè)置主元素超出隱藏(overflow:hidden)，這樣才不會出現(xiàn)橫向滾動條；
- 偽類可以設(shè)置成正圓(border-radius: 50%) 也可以是橢圓(border-radius: top right bottom left)；
- 既然是背景裝飾，可以把主元素的層級設(shè)置底一些(z-index: -1)；
具體實現(xiàn):
第一種（正圓弧）：
<style>
*{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;
}
</style>
<body>
<div class="bg_arc"></div>
</body>
實現(xiàn)效果：
正圓弧
參照上面的要點，大概也能知道個原理了吧。看到的圓弧高度等于主元素高度，偽元素絕對于主元素定位，左右居中，上移100%；圓弧弧度取決于偽類的寬度，這點放到這里來說，是怕放在上面說反而讓人覺得復(fù)雜了。
如果還不理解的話，可以把上面不必要的樣式注釋掉，輔助理解:
<style>
*{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;
}
</style>
<body>
<div class="bg_arc"></div>
</body>
效果：
輔助理解
可以多調(diào)調(diào)高度寬度來幫助理解。
第二種（有角度的弧）：
<style>
*{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;
}
</style>
<body>
<div class="bg_arc"></div>
</body>
效果圖：
角度弧
實現(xiàn)角度弧的思路與正圓弧差不多，不同地方是：
不同點1. 偽元素大小與主元素一樣，覆蓋在主元素上；
不同點2. 設(shè)置偽元素的單個角度；
