我正在努力提高我的 css 技能，并想像月亮一樣繪制并勾勒出它的輪廓。我通過使用 2 個圓圈來實作這一點，第二個圓圈的顏色與背景相同，因此看起來像月亮。但是現在我想勾勒/給它一個邊框，但我不知道該怎么做，因為其他部分與第二個圓圈重疊。
body{
position: relative;
background-color: white;
padding-left: 40%;
}
#div1{
position: absolute;
height: 400px;
width: 400px;
border-radius: 100%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
border: 3px solid black;
}
#div2{
position: absolute;
height: 350px;
width: 350px;
background-color: white;
border-radius: 50%;
margin-left: 110px;
margin-top: 25px;
z-index: 2;
}<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>uj5u.com熱心網友回復：
我將使用掩碼簡化您的代碼，然后我將依靠陰影過濾器來繪制輪廓
#div1{
filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000);
}
#div1:before {
content:"";
display:block;
height: 200px;
width: 200px;
border-radius: 50%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
-webkit-mask: radial-gradient(circle 100px at 80% 50%,#0000 98%,#000);
}<div id="div1"></div>uj5u.com熱心網友回復：
您可以將邊框左屬性添加到 div2 以獲得所需的結果。
body{
position: relative;
background-color: white;
padding-left: 40%;
}
#div1{
position: absolute;
height: 400px;
width: 400px;
border-radius: 100%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
border: 3px solid black;
}
#div2{
position: absolute;
height: 350px;
width: 350px;
background-color: white;
border-radius: 50%;
margin-left: 110px;
margin-top: 25px;
z-index: 2;
border-left: 3px solid black;
}<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>uj5u.com熱心網友回復：
就像 Justinas 已經評論過的那樣，您在這里嘗試在 CSS 中完成 SVG 的作業，這非常笨拙且效率低下。
如果您對 HTML 和 CSS 有所了解，那么 SVG 會感覺更像。
SVG 對您來說就像是幾個新的 HTML 元素，您只需將它灑在您的 HTML 中即可；它也只是使用與您的 HTML 已經使用的相同的 CSS 樣式表。
為了說明，請在此處運行此代碼段；只需幾行 CSS 和一些 SVG，我相信您可以立即說出其中 90% 的含義。
body { background-color: #FFF; }
svg { background-color: #CCC; }
.gradient_start { stop-color:rgb(255, 255, 0); stop-opacity: 1; }
.gradient_end { stop-color:rgb(255, 0, 0); stop-opacity: 1; }
text { font-family: "Verdana"; font-size: 32pt; }<html>
<body>
<svg width="400" height="200">
<defs>
<linearGradient id="mygradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" class="gradient_start" />
<stop offset="100%" class="gradient_end" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#mygradient)" />
<text x="150" y="86" fill="#ffffff">
Turtles !
</text>
</svg>
</body>
</html>在 SVG 中，您可以訪問更多繪圖元素，例如<ellipse>本示例中使用的。
uj5u.com熱心網友回復：
使用 border-left 屬性查看結果。
body{
position: relative;
background-color: white;
padding-left: 40%;
}
#div1{
position: absolute;
height: 400px;
width: 400px;
border-radius: 100%;
background-image: linear-gradient(45deg, #050182, #51bfdb);
border: 3px solid black;
}
#div2{
position: absolute;
height: 350px;
width: 350px;
background-color: white;
border-radius: 50%;
margin-left: 110px;
margin-top: 25px;
z-index: 2;
border-left: 2px solid black;
}<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381215.html