我正在搜索網站參考資料，發現一個帶有很酷圖片標題的網站。這是網站的圖片標題
它在左下角和右下角有邊框半徑，所以讓影像看起來很酷。我試過使用 border-bottom-left-radius 和 border-bottom-right-radius。但它看起來不一樣。這是我試過的代碼
#image-header{
height:100px;
width:500px;
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
background:green;
}
我可以僅使用 CSS 來實作這一點嗎？
uj5u.com熱心網友回復：
您可以這樣做：
#image-header {
height: 100px;
width: 500px;
background: green;
border-radius: 60% / 20%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}<div id="image-header"></div>嘗試調整border-radius屬性中的百分比值，直到獲得所需的結果。
uj5u.com熱心網友回復：
您可以在標題框下方添加一個分隔線，并將 border-radius 添加到該分隔線：
.header {
padding: 10px;
background: #efefef;
}
.header-bottom {
border-radius: 0 0 100% 100%;
height: 50px;
width: 100%;
background: #efefef;
}<div class="header">
<h1>Header title</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
</div>
<div class="header-bottom"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/387168.html
標籤：css
上一篇：在頁面上居中回應矩陣
下一篇：如何為移動用戶提供圖片而不是視頻