我想爲這個徑向漸變生成邊框，也是爲div

這是我的代碼。我想爲這個徑向漸變生成邊框，也是爲div

div { 
 
    height: 150px; 
 
    margin: 5em 2em; 
 
    background: radial-gradient(circle at top center, transparent, transparent 70px, black 70px, black); 
 
    border-radius: 8p## Heading ##x; 
 
    position: relative; 
 
} 
 

 
.circle { 
 
    width: 120px; 
 
    height: 120px; 
 
    background: red; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
body { 
 
    background-image: url(http://www.fillmurray.com/1000/1000); 
 
    background-size: cover; 
 
}

<div> 
 
    <span class="circle"></span> 
 
</div> 
 

 
<!-- this creates the cut in a div placing a circle on the cut and i need to put a border for the whole div even in the cut part of div. -->

來源

2017-02-27 madhu

你能澄清你試圖做什麼？ –

從代碼中的評論來看，OP正試圖在包含div元素的黑色上獲取邊框。邊框只需要應用於外部div，但也有一個圍繞「剪切」（包含紅色跨度）的邊框，但不能與紅色跨度重疊。 –

你的意思是這樣？：

div { 
 
    height: 150px; 
 
    margin: 5em 2em; 
 
    background: radial-gradient(circle at top center, transparent, green 70px, black 70px, black); 
 
    border-radius: 8p## Heading ##x; 
 
    position: relative; 
 
    border: 10px solid green; 
 
} 
 

 
.circle { 
 
    width: 120px; 
 
    height: 120px; 
 
    background: red; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
body { 
 
    background-image: url(http://www.fillmurray.com/1000/1000); 
 
    background-size: cover; 
 
}

<div> 
 
    <span class="circle"></span> 
 
</div> 
 

 
<!-- this creates the cut in a div placing a circle on the cut and i need to put a border for the whole div even in the cut part of div. -->

來源

2017-02-28 09:43:15 OST

我想爲這個徑向漸變生成邊框，也是爲div

回答

相關問題