Question

我使用border-radius创建了一个圆圈，现在我想要边框虚线但不适用，我怎样才能使用css获得虚线边框。

我已在此Fiddle

下创建了演示

Css代码：

.round
{ 
background-color: #ddd;
border: 2px dashed #000;
height: 100px;
width: 100px;
border-radius: 50%;
}

Html代码：

<div class="round">

</div>

Answer 1

试试这个，它适用于所有浏览器

div.dotted.round {
  width:20vw;
  height:20vw;
  gborder:solid 3px;
  border-radius:100%;
  position:relative;
  display:flex;  
  justify-content:center;
  align-items:center;
  font-size:2.5vw;
  border:solid rgba(0,0,0,0.2);/*Demo, debug: show me edges */
}
 svg.dotted.round  {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  stroke: #000000; 
  stroke-width: 3px;
  stroke-dasharray:  0.25 4;
  stroke-dashoffset: 8;
  stroke-linecap:round;                                    fill: none;


}

<div class="dotted round firefox">
  <svg viewBox="0 0 103 103" version="1.1"
  xmlns="http://www.w3.org/2000/svg"  class="dotted round firefox">
  <circle cx="50%" cy="50%" r="50" />
</svg>
Hey firefox!<br/>
  is that dotted ?
</div>

在css中，当使用border-radius属性通过css生成圆时，然后在边界上添加虚线

1 个答案: