边框造型的圆圈是蜱虫

Question

我有一个带有虚线边框的圆圈.但是,边框应该更像是垂直破折号,而不是点.

有没有办法使用css使边框与设计完全相同(垂直划线而不是粗实线)？

我想改变这个类:"OtherCaptionBorder"

我的css:

    .caption_circle{
    position: absolute;
    top: 450px;
    left: 7%;
    z-index: 10;
    padding-top: 35px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    height: 245px;
    width: 245px;
    background-color: #373737;
    opacity: 0.83;
    border-radius: 50%;
    display: inline-block;
    border-color: #fff;
    border-style: solid;
    border-width: 7px;
    font-family: open_sansregular;
    font-weight: 600;
}
.OtherCaptionBorder{
position: absolute;
    top: 2px;
    left: 1%;
    z-index: 10;
    padding-top: 35px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    height: 228px;
    width: 228px;
    border-radius: 50%;
    border: 2px dotted #ffffff;
}
.InnerCircleText{
margin-top: 8px;
    font-size: 18px;
    font-family: open_sansregular;
    font-size: 24.3px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.11;
    letter-spacing: 0.8px;
    text-align: center;
    color: #ffffff;
}

这是我的HTML:

  <div class="caption_circle">
   <div class="OtherCaptionBorder">
   <p class="InnerCircleText">
    DOCTOR-<br>
    RECOMMENDED<br>
    FOR IBS, IBD,<br>
    CELIAC<br>
    & SIBO<br>
    <hr class="HRHomepage">
    </p>
    </div>
  </div>

以下是我希望我的圆圈看起来像:

Answer 1

你可能只用CSS就可以达到你想要的效果,但由于你无法控制边框样式中破折号的长度(也没有空格),你很可能在开始时得到一个不令人满意的结果/边界相交的圆的末端.

body {
background: #ccc;
}

.outer {
  background-color: rgba(0,0,0,0.5);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid white;
}

.inner {
  width: 100%;
  height: 100%;
  border: 5px dashed white;
  border-radius: 50%;
  box-sizing: border-box;
}

<div class="outer">
  <div class="inner"></div>
</div>

但是,如果您可以使用SVG,您可以控制 stroke-dasharray

.img-bg {
  background-image: url(https://picsum.photos/900/500);
  background-size: cover;
}

.outer-circle {
  position: relative;
  background: transparent;
  width: 20em;
  height: 20em;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1em solid white;
  overflow: hidden;
}

.custom-circle {
  stroke-width: 10;
  stroke: white;
  stroke-linecap: butt;
  fill: rgba(0, 0, 0, 0.5);
  stroke-dasharray: 1 2.14; /* See below for an explanation */
}

.text {
  margin: 0 auto;
  padding: 0 1.5em;
  color: white;
  text-align: center;
  position: absolute;
  top: 50%;
  font-size: 2em;
  transform: translateY(-50%);
}

hr {
  width: 60%
}

<section class="img-bg">
  <div class="outer-circle">
    <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle class="custom-circle" cx="50" cy="50" r="50" />
</svg>
    <div class="text">Vestibulum pellentesque ac arcu eget.<hr/></div>
  </div>
</section>

计算stroke-dasharray值:

为什么魔数2.14？根据罗伯特关于另一个问题的回答:

stroke-dasharray如果你想要均匀间隔的线条,圆的圆周/ 值的总和需要是一个整数...

我们知道我们的圆的半径为50(<circle ... r="50" />).所以用一点点数学(你可以使用谷歌这个):

C=2?r=2·?·50?314.15927

我们计算出我们的周长 314.15927

说,我们要100个破折号,从那里C/100 ? 3.14.这给了我们dash-array: 1 2.14.