Question

我正在尝试使div透明，以便仅显示框阴影。

CSS

.circle{
    position: absolute;
    background-color: transparent;
    left: 100px;
    top: 100px;
    min-width: 500px;
    min-height: 500px;
    box-shadow: 0 0 300px rgba(255, 000, 048, 1);
    border-radius: 300px;
}

这是结果https://i.imgur.com/8xNg5wc.png

您可以看到圆圈与背景颜色相同

我真正想要的是通过圆圈看到阴影效果

（我抵消了阴影）想象没有圆圈https://i.imgur.com/i55o2IL.png

的情况

Answer 1

另一种解决方案是使用径向渐变：

.circle {
  background-color: #000;
  background-image: radial-gradient(circle at center, rgb(255, 000, 048), #000 300px);
}

这是另一种解决方案，但它不能像第一个建议一样有效。

.circle {
    position: absolute;
    background-color: rgb(255, 000, 048);
    left: 100px;
    top: 100px;
    min-width: 500px;
    min-height: 500px;
    border-radius: 50%;
    filter: blur(300px);
}

Answer 2

对不起，我之前误解了你的问题。你需要这样的东西吗？

var query1 = query.Where(x => x.BirthDate > now);
var query2 = query.Where(x => x.EnrollmentDate > now);
var query3 = query.Where(x => x.GraduationDate > now);

此处示例：http://tpcg.io/zod3S3

Answer 3

我很难准确地了解您要查找的内容，但是请尝试以下操作：

.circle {
  position: absolute;
  background-color: inherit;
  left: 100px;
  top: 100px;
  width: 500px;
  height: 500px;
  box-shadow: 0 0 300px rgba(255, 000, 048, 1);
  border-radius: 300px;
}

Div仍可见，具有background-color：透明；

3 个答案: