为什么这个css在MVC项目中不会像预期的那样工作？

Question

我想在我的MVC项目中用css绘制一个阴阳符号。所以我发现了一些css，它可以满足我的需求：

#yin-yang {
  width: 96px;
  height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}
#yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid red;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}
#yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}

<div id="yin-yang"></div>

我可以轻松地在JSFiddle中使用它：

但是一旦我插入in my MVC project，它就会画出所有错误的

这可能是什么原因？

Answer 1

这是因为您在MVC或DotnetFiddle中使用了 Bootstrap Framework，它有一些重置CSS 以及一些基本属性，如box-sizing显然忽略了由于padding和border等而导致的任何元素的所有受影响的高度或宽度（在您的情况下是您的伪元素）。

使用此 CSS 或者可以说改变 CSS ，您也可以在您的环境中使用它：

#yin-yang {
    width: 96px;
    height: 96px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 46px;
    height: 46px;
}
#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    background: red;
    border: 18px solid #eee;
    border-radius: 100%;
    width: 46px;
    height: 46px;
}

Answer 2

你使用bootstrap css包括导致失真的box-sizing: border-box;。你可以通过添加

覆盖它

box-sizing: initial;

每个#yin-yang个样式（包括:before和:after）