圆的边框样式要打勾 [英] Border styling of a circle to be ticks

问题描述

我有一个带虚线边框的圆圈.但是，边框应更像垂直虚线，而不是圆点.

I have a circle that has dotted borders. However, instead of dots the border should be more like vertical dashes.

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

Is there a way to make the border exactly the same as the design (the vertical dashes one not the thick solid line) with css?

我想更改此类:"OtherCaptionBorder"

I want to change this 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>

这是我希望我的圈子看起来像的样子:

Here is how I want my circle to look like:

推荐答案

您可能可以单独使用CSS来实现接近您想要的效果，但是由于您无法控制CSS的长度(以及它们之间的间距)边框样式中的破折号，您很可能会在边界相交的圆的起点/终点获得不令人满意的结果.

You might be able to achieve something close to what you want with CSS alone, but as you can't control the length of (nor the space between) the dashes in the border style, you will most likely get an unsatisfactory result at the start/end of the circle where the borders meet.

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

But if you can use SVG you have control over 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>

为什么魔术数为2.14?根据罗伯特的答案在另一个问题上:

Why the magic number 2.14? According to Robert's answer on another question:

如果要均匀间隔的线，则圆的周长/stroke-dasharray值的和必须为整数...

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):

We know that our circle has a radius of 50 (<circle ... r="50" />). So with a little maths (you can use google for this):

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

我们计算出周长为314.15927

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

Say we want 100 dashes, from there C/100 ≈ 3.14. This gives us the dash-array: 1 2.14.

这篇关于圆的边框样式要打勾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！