时间戳

首页 > 解决方案 > 圆的边框样式为刻度

html - 圆的边框样式为刻度

问题描述

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

有没有办法使边框与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>

这是我希望我的圈子看起来的样子： 需要刻度线边框。

标签： htmlcsssvggeometrystroke-dasharray

解决方案

您可能能够仅使用 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.

推荐阅读