分享
三行代码  ›  专栏  ›  技术社区  ›  Eli

当我使用径向渐变(圆位于)时,为什么不透明度的边框会在圆内形成一个正方形? - Why does a border that has opacity make a square inside a circle when I use radial-gradient(circle at)?

css
  •  2
  • Eli  · 技术社区  · 2 月前

    当我在CSS中有一个带背景的圆:径向渐变(75px 50px,5cabff,003处的圆)并添加一个不透明度的边框时,它会使圆看起来像里面有一个正方形。为什么会发生这种情况,有没有解决办法不发生这种情况?

    .style {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 27px solid #00000030;
      background: radial-gradient(circle at 75px 50px, #5cabff, #003);
    }
    <div class="style"></div>

    在添加不透明度边界时,我希望圆形中没有正方形,而是有边界的三维球体。

    1 回复  |  直到 2 月前
        1
  •  3
  •   Zohir Salak    2 月前

    这是因为边框包含在背景中,修复它的一种方法是使背景只覆盖内容。

    .style {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 27px solid #00000030;
      background: radial-gradient(circle at 75px 50px, #5cabff, #003) content-box;
    }
    <div class="style"></div>

    编辑:使用覆盖

    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    
    .style {
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      /*   border: 27px solid #00000030; */
      background: radial-gradient(circle at 75px 50px, #5cabff, #003);
    }
    
    .style:after {
      content: '';
      border: 27px solid #00000030;
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 50%;
    }
    <DIV class=“style”></DIV>

    编辑:多个背景

    .style {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: 
      radial-gradient(#ffffff00 73px, #00000030 73px), radial-gradient(circle at 75px 50px, #5cabff, #003);
    }
    <DIV class=“style”></DIV>