如何在div中創建一個圓形背景并裁剪它？
uj5u.com熱心網友回復：
一個簡單的剪輯路徑可以做到：
。span class="hljs-selector-class">.box {
width:300px;
height:150px;
background:lightblue;
clip-path:circle(farthest-side);
}< div class="box"></div> 或者徑向梯度
span class="hljs-selector-class">.box {
width:300px;
height:150px;
background:radial-gradient(farthest-side,lightblue 98%,#0000) 。
}< div class="box"></div> uj5u.com熱心網友回復：
span class="hljs-selector-class">.container {
width: 320px;
height: 160px;
overflow: hidden;
}
.circle {
background-color: #aad2dd;
border-radius: 50%;
width: 320px;
height: 320px;
margin-top: -80px;
}<div class="container"> /span>
<div class="circle"/span>> </div>>
</div>/span>uj5u.com熱心網友回復：
你可以這樣做：
div {
height: 160px;
width: 320px;
position: relative;
overflow: hidden;
}
div: after {
內容。"";
position: absolute;
border-radius: 17% / 50%。
background-color: lightblue;
height: 130%;
width: 100%;
top: 50%;
transform: translateY（-50%）。
}< div></div> uj5u.com熱心網友回復：
這樣做應該沒問題：
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: 紅色。
border-radius: 47% / 30%。
color: white;
text-align: center;
text-indent: .1em;
}
#tv: before {
內容。''/span>;
position: absolute;
top: 0;
bottom: 0;
right: -5%;
left: -5%;
background: 繼承。
border-radius: 20% / 50%。
}< div id="tv"></div> 轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/321895.html
標籤：
下一篇：多標簽頁上的影像模版