어떻게하면 html/CSS를 투명한 원 안에 채울 수 있습니까?

Question

꽤 특이한 디자인 블록의 HTML/CSS를 만드는 작업이 있습니다 : enter image description here

아이디어가 있으십니까? 여기

내 코드입니다 : 하지만 그림자 이미지 FF :(

<section class="service-block"> 
      <div class="container"> 
       <div class="row"> 
        <div class="item"> 
         <object data="" type=""> 
         <svg viewbox="-7 -1 24 19" style="background-image: url('/img/ic_advantages-1_calc.png')"> 
          <path d="M-10 -1 H30 V18 H-10z M 5 8 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/> 
          <image x="0" y="0" xlink:href="/img/circle_shadow.png" ></image> 
         </svg> 
         </object> 

         <div class="info"> 
          <div class="title"><a href="">Some link</a></div> 
          <div class="price">from 3 000 <span class="rub">₽</span>per year</div> 
          <div class="inluded"><a href="">Go?</a></div> 
         </div> 
        </div> 

       </div> 
      </div> 
     </section> 

Answer 1

여기

나는 하나 개의 사업부로 ... 그것을 할 거라고 방법

에 표시되지 않습니다. 방사형 그라데이션 및 드롭 그림자.

body { 
 
    background: #c0ffee; 
 
} 
 
div { 
 
    width: 200px; 
 
    height: 250px; 
 
    margin: 1em auto; 
 
    background: radial-gradient(circle at center 75px, transparent, transparent 50px, red 50px); 
 
    -webkit-filter: drop-shadow(0px -4px 4px black); 
 
-  filter: drop-shadow(0px -4px 4px black); 
 
    overflow: hidden; 
 
}

<div></div>

01,235 거대한 박스 shadow..and 드롭 그림자와 함께 16,

또는

의사 요소

body { 
 
    background-color: #c0ffee; 
 
} 
 
div { 
 
    width: 200px; 
 
    height: 250px; 
 
    margin: 1em auto; 
 
    -webkit-filter: drop-shadow(0px -4px 4px black); 
 
    filter: drop-shadow(0px -4px 4px black); 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
div:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 100px; 
 
    height: 100px; 
 
    box-shadow: 0 0 0 1000px red; 
 
    border-radius: 50%; 
 
    left: 50px; 
 
    top: 35px; 
 
}

<div></div>

Answer 2

위치에 아이 요소의 모서리를 둥글게하는 방법 : 친척. 그림자가있는 블록이 2 개 있으면 다음과 같이 겹칩니다. https://yadi.sk/i/1lXwqKTatpvue