課程
/前端開發(fā)
/HTML/CSS
/CSS深入理解之border
這個圓角? 是怎么覆蓋的呀? 蒙蔽嘍 嘿嘿
2017-12-15
源自:CSS深入理解之border 2-1
正在回答
可以用偽元素,具體實(shí)現(xiàn)如下css部分div {height: 0;width: 0;border: 100px dotted red;position: relative;}div::after{content: ‘’;position: absolute;top: -100px;bottom:-100px;left:-50px;right:-50px;}div::before{content:’’;position:absolute;left:-100px;right:-100px;top:-50px;bottom:-50px;}html 部分<div><\div>
慕運(yùn)維801387
他問的是這個吧。。。
我把代碼給你整體寫下來看你就懂了
<style>
.box{width:100px;height:100px;overflow:hidden;}
.dotted{width:100%;height:100%;border:100px dotted red; }
</style>
<div class="box"><div class="dotted"></div></div>
外面div寬高只有100px,超出會隱藏,內(nèi)部div的寬高一樣,邊框是100px,顯示出來就是四個圓點(diǎn),因?yàn)樵O(shè)置了
overflow:hidden;自然內(nèi)部div的內(nèi)容和其他的圓點(diǎn)都隱藏了。
舉報(bào)
深入講解border使用方法及應(yīng)用,以及如何借助border完成布局
1 回答為什么我的出來是6個圓?
1 回答為什么設(shè)置overflow:hidden就只會有一個圓了?
2 回答在火狐也是小圓
3 回答怎么任意 圓角那
1 回答任意圓角怎么實(shí)現(xiàn)的
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2019-11-10
可以用偽元素,具體實(shí)現(xiàn)如下
css部分
div {
height: 0;
width: 0;
border: 100px dotted red;
position: relative;
}
div::after{
content: ‘’;
position: absolute;
top: -100px;bottom:-100px;
left:-50px;right:-50px;
}
div::before{
content:’’;
position:absolute;
left:-100px;right:-100px;
top:-50px;bottom:-50px;
}
html 部分
<div><\div>
2018-07-27
2017-12-18
我把代碼給你整體寫下來看你就懂了
<style>
.box{width:100px;height:100px;overflow:hidden;}
.dotted{width:100%;height:100%;border:100px dotted red; }
</style>
<div class="box"><div class="dotted"></div></div>
外面div寬高只有100px,超出會隱藏,內(nèi)部div的寬高一樣,邊框是100px,顯示出來就是四個圓點(diǎn),因?yàn)樵O(shè)置了
overflow:hidden;自然內(nèi)部div的內(nèi)容和其他的圓點(diǎn)都隱藏了。