Question

是否可以用两种颜色制作圆形和点状div边框，如果是，怎么样？

现在我做的是：

＆＃13;

.container{
  position: relative;
  width: 100%;
  height: 100vh;
}
.years {
  display: block;
  position: absolute;
  width: 50px;
  height: 0px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #1c1e2e;
  z-index: 999;
  border-radius: 100%;
  text-align: center;
  padding: 60px 30px;
}
.years:before {
  content: '';
  position: absolute;
  width: 140px;
  height: 155px;
  top: -17px;
  left: -17px;
  border-radius: 100%;
  border-right: 3px dotted #000;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
}
.years:after {
  content: '';
  position: absolute;
  width: 140px;
  height: 155px;
  top: -17px;
  left: -17px;
  border-radius: 100%;
  border-left: 3px dotted #dfbc82;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
}

＆＃13;

<div class="container">
  <div class="years"></div>
</div>

＆＃13;

但我想这样做：

没有任何平滑，并且无法弄清楚如何在打印屏幕中制作正常的点... 有任何想法吗？感谢任何建议..：/

Answer 1

您可以将边框的颜色分割为常规元素的中间，而无需任何伪元素的帮助，只需单独在底部，左侧，顶部和右侧边框着色。

正如您所看到的，这个问题是，它不是直接从上到下分开，而是以一个小角度分开：

＆＃13;

div {
  font-size: 24px;
  height: 192px;
  line-height: 192px;
  text-align: center;
  width: 192px;
  
  border-radius: 100%;
  border-style: dotted;
  border-width: 4px;
  
  border-bottom-color: blue;
  border-left-color: blue;
  border-right-color: red;
  border-top-color: red;
}

＆＃13;

<div>
  Foobar
</div>

＆＃13;

要解决此问题，我们只需将元素旋转45度即可：

＆＃13;

div {
  font-size: 24px;
  height: 192px;
  line-height: 192px;
  text-align: center;
  width: 192px;
  
  border-radius: 100%;
  border-style: dotted;
  border-width: 4px;
  
  border-bottom-color: blue;
  border-left-color: blue;
  border-right-color: red;
  border-top-color: red;
  
  transform: rotateZ(45deg);
}

＆＃13;

<div>
  Foobar
</div>

＆＃13;

现在唯一的问题是我们的内部内容也会被旋转，所以你可以简单地将它包装在内部元素中并以相反的方式旋转该元素：

＆＃13;

div {
  font-size: 24px;
  height: 192px;
  line-height: 192px;
  text-align: center;
  width: 192px;
  
  border-radius: 100%;
  border-style: dotted;
  border-width: 4px;
  
  border-bottom-color: blue;
  border-left-color: blue;
  border-right-color: red;
  border-top-color: red;
  
  transform: rotateZ(45deg);
}

span {
  display: block;
  transform: rotateZ(-45deg);
}

＆＃13;

<div>
  <span>Foobar</span>
</div>

＆＃13;

所有现代浏览器都支持CSS trasnform属性，但可能需要为旧浏览器添加前缀。查看http://caniuse.com/#feat=transforms2d了解详情。

Answer 2

要做到这一点，你必须定义所有div角，之后做一个简单的旋转以获得垂直位置，按照例子：

＆＃13;

.container{
  position: relative;
  width: 100%;
  height: 100vh;
}
.years {
  display: block;
  position: absolute;
  width: 150px;
  height: 150px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #1c1e2e;
  z-index: 999;
  border-radius: 100%;
  text-align: center;
}
.years:before {
  content: '';
  position: absolute;
  top: -17px;
  left: -17px;
  bottom:-17px;
  right:-17px;
  border-radius: 100%;
  border-right: 3px dotted #000;
  border-bottom: 3px dotted #000;
  border-top: 3px dotted transparent;
  border-left: 3px dotted transparent;
  transform: rotate(-45deg);
}
.years:after {
  content: '';
  position: absolute;
  top: -17px;
  left: -17px;
  bottom:-17px;
  right:-17px;
  border-radius: 100%;
  border-left: 3px dotted #dfbc82;
  border-top: 3px dotted #dfbc82;
  border-bottom: 3px dotted transparent;
  border-right: 3px dotted transparent;
  transform: rotate(-45deg);
}

＆＃13;

<div class="container">
  <div class="years"></div>
</div>

＆＃13;

半径不同的css边框

2 个答案: