css 外弧_css 伪类实现弧形
在實(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)題。
- 上一篇： 使用vim的重不重要_VIM高级操作，经
- 下一篇： daad转换器实验数据_箔芯片电阻在高温