圆圈的边框样式为刻度线

Question

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

有没有办法使边框与 css 的设计完全相同（垂直虚线不是粗实线）？

我想改变这个class："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 实现接近您想要的效果，但由于您无法控制边框中破折号的长度（也无法控制 space 之间的长度）样式，您很可能会在边界相交的圆圈的 start/end 处得到不满意的结果。

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？根据另一个问题：

The circumference of the circle / sum of the stroke-dasharray values needs to be an integer if you want evenly spaced lines...

我们知道我们的圆的半径是 50 (<circle ... r="50" />)。所以用一点数学（你可以使用 google 来计算）：

C=2πr=2·π·50≈314.15927

我们算出我们的周长是314.15927

假设我们想要 100 个 破折号 ，从那里 C/100 ≈ 3.14。这给了我们 dash-array: 1 2.14.

圆圈的边框样式为刻度线

Border styling of a circle to be ticks

html

css

geometry

svg

stroke-dasharray

正在计算 `stroke-dasharray` 个值：

圆圈的边框样式为刻度线

Border styling of a circle to be ticks

html

css

geometry

svg

stroke-dasharray

正在计算 stroke-dasharray 个值：

正在计算 `stroke-dasharray` 个值：