您可以将div的一部分设为透明并影响其框形阴影吗? [英] can you make a section of a div transparent and affect its box-shadow

问题描述

通过遵循以下示例，我设法使div的一部分变得透明: http://jsfiddle. net/5VDLX/144/

I have managed to make a part of my div transparent by following this example: http://jsfiddle.net/5VDLX/144/

HTML(JSFIDDLE)

<div class="container">
    <div class="shape"></div>
    <div class="circle"></div>
</div>

CSS(JSFIDDLE)

body{
    background: yellow;
}
.shape {
    width: 500px;
    height: 75px;
    background-color: transparent;
    background-image: -webkit-radial-gradient(50% 100%, circle, transparent 50px, black 0);
    background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0);
}
.circle {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid red; /* red for demonstration */
    border-radius: 50px;
    margin: -51px 0 0 199px; /* considering borders */
}

但是div有一个盒子阴影，我想沿着透明的半圆形而不是正方形.

But the div has a box-shadow which i would like to follow the transparent half-circle instead of remaining square.

这可以实现吗?如果可以，怎么办?

Can this be achieved? And if so, how?

推荐答案

您可以使用 drop-shadow 过滤器:

You can use the drop-shadow filter:

body {
  background: yellow;
}

.shape {
  width: 500px;
  height: 75px;
  background: radial-gradient(circle at 50% 100%, transparent 49px, black 50px);
  filter:drop-shadow(0 0 10px green);
}

<div class="container">
  <div class="shape"></div>
</div>

这篇关于您可以将div的一部分设为透明并影响其框形阴影吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！