如何倒轉添加邊框半徑？

我目前正在努力實現這一點：如何倒轉添加邊框半徑？

但當border-radius: 15px 15px 0 0我得到這個：

來源

2017-04-03 Trondro Mulligan

這是不直接pos sible使用邊界半徑。你可以在白色的矩形上放置一個帶有邊界半徑的白色元素......如果你還需要該部分的透明度，那麼請使用_masks_。 – CBroe

CSS/HTML支持掩碼？ –

你也可以做這個僞css3 –

單獨邊界半徑不回答這個問題，但你可以做這樣的：

溢出隱藏在外箱與圓的角落： https://codepen.io/sergejmueller/pen/fJEml

border-radius: 50%;

您還可以使用拉迪人梯度： http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

background-image: 
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px), 
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px), 
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00  15px), 
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);

也掩蓋圖像爲一體的現代化解決方案：

-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);

來源

2017-04-03 11:18:48

我認爲使用:: before會更好。這樣你就創建了不必要的HTML標記。 –

雖然它仍然是一樣的想法。 ::之前和::之後只是僞元素 –

是啊！它的確是一樣的想法！ +1。但是，創建優化代碼的習慣對每個人都是一個好的開始。在一個更大的項目中，只需使用像這樣的好習慣就可以顯着改善他的項目。 –

你可以使用這個:before CSS選擇器：

.box{ 
 
    background:red; 
 
    width:50px; 
 
    height:100px; 
 
    border-radius:3px; 
 
    position:relative; 
 
    margin-top:30px; 
 
} 
 
.box:before{ 
 
    content:""; 
 
    width:50px; 
 
    height:30px; 
 
    border-radius:100%; 
 
    background:#fff; 
 
    position: absolute; 
 
    top: -17px; 
 
}

<div class="box"> 
 
</div>

來源

2017-04-03 11:29:22

如何倒轉添加邊框半徑？

回答

相關問題