使用 CSS 從矩形建立圓形切口
提出的問題尋求一種在矩形內實現圓形切口的替代方法。最初的解決方案使用元素和邊框的組合，效果令人滿意，但缺乏乾淨的標記，並且在某些瀏覽器中遇到錯誤。
替代方法
更多優雅的解決方案涉及利用單一元素（以及偽元素）並採用徑向漸變背景。這是修改後的CSS：
div:before {
position: absolute;
content: '';
width: 90px;
height: 90px;
top: -75px;
left: calc(50% - 45px);
background-color: red;
border-radius: 50%;
}
div {
position: relative;
margin: 100px auto 0 auto;
width: 90%;
height: 150px;
border-radius: 6px;
background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}說明
此更新的方法解決了乾淨標記問題和初始版本中遇到的瀏覽器錯誤 解決方案。它僅使用 CSS 從矩形形狀提供無縫且視覺上令人愉悅的圓形切口。
以上是如何僅使用 CSS 在矩形中建立圓形切口？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
