Question

我必须在圆圈内的网页上制作一些文字，我知道这可以通过CSS完成，这是我的代码

public class Base
{
    public virtual void Foo()
    {
        Console.WriteLine("Hello from Base");
    }
}

public class Derived : Base
{
    public override void Foo()
    {
        base.Foo();
        Console.WriteLine("Text 1");
        WriteText2Func();
        Console.WriteLine("Text 3");
    }

    protected virtual void WriteText2Func()
    {
        Console.WriteLine("Text 2");
    }
}

public class Special : Derived
{
    public override void WriteText2Func()
    {
        //WriteText2Func will write nothing when method Foo is called from class Special.
        //Also it can be modified to do something else.
    }
}

但问题是，当我试图让圆圈更大时，它附近的其他列会失去对齐（例如我设置宽度和高度为460px）这里的一个例子应该是：

圆圈div文本列|文本栏

有没有办法在不改变/交叉其他列的情况下增加背景大小？

Answer 1

使用伪元素

div {
  display: inline-block;
  position: relative;
  width: 5%;
  text-align:center;
  padding:10%;
}
.circle:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(75,113,252, 0.85);
  border-radius: 50%;
}

<div class="circle">Circle</div><div>Col2</div><div>Col2</div>

在列中使用更大的圆形背景颜色

1 个答案: