界面与布局精校教程

CSS 实用技巧

聚焦背景模糊叠加、径向渐变缺口等难以一眼想到的视觉实现。

backdrop-filter渐变伪元素

父子元素都使用backdrop-filter，子元素上的backdrop-filter失效问题,父元素使用伪类

<div class="parent">
  <div class="son">
    </div>
</div>
<style>
.parent {
  width:40px;
  height:40px;
  position:fixed;
  left: 10px;
  top:30px;
}

.parent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-backdrop-filter: blur(40px);
  background: #1212124d;
  backdrop-filter: blur(40px);
}

.son {
  backdrop-filter: blur(40px);
  background: #1212124d;
  width:40px;
  height:40px;
  position:absolute;
  left: 10px;
  top:40px;
}
</style>

css实现内陷圆 -- 神奇的滤镜!巧妙实现内凹的平滑圆角 - 掘金（常见于优惠券的样式）

 background: radial-gradient()

示例

&::before {
    content: "";
    position: absolute;
    top: 0;
    right: 210rpx;
    z-index: 100;
    height: 30rpx;
    width: 30rpx;
    transform: translateX(50%) translateY(-50%);
    background: radial-gradient(
      circle at center,
      #f2f2f2 0,
      #f2f2f2 50%,
      transparent 50%,
      transparent
    );
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 210rpx;
    z-index: 100;
    height: 30rpx;
    width: 30rpx;
    transform: translateX(50%) translateY(50%);
    background: radial-gradient(
      circle at center,
      #f2f2f2 0,
      #f2f2f2 50%,
      transparent 50%,
      transparent
    );
  }