Как создать несколько границ вокруг существующей границы круга - PullRequest
Новая
       14

Как создать несколько границ вокруг существующей границы круга

6 голосов
/ 12 апреля 2019

Я создаю полупрозрачный круг в css, используя border-radius: 50%; и border: 400px solid rgba(255, 255, 255, .5);.

Вокруг этого круга я хотел бы иметь другую полностью прозрачную границу (скажем, 10 пикселей)иметь еще одну границу (из 10 пикселей), которая снова будет полупрозрачной.

Вот как я создаю свой круг: 

div.circle {
  background: rgba(255, 255, 255, .5);
  height: 400px;
  width: 400px;
  border-radius: 50%;
  margin: auto;
  margin-top: 10px;
}
<div class="circle"></div>

Что мне нужно сделать, чтобы создать еще одну границу вокруг существующей границы, а затем еще одну границу?

Ответы [ 2 ]

6 голосов
/ 12 апреля 2019

Вы можете использовать простую рамку и обрезать фон до content-box, чтобы создать прозрачную часть в области заполнения: 

div.circle {
  background: rgba(255, 255, 255, .5) content-box;
  padding: 10px;
  height: 180px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50%;
  margin:10px auto;
  border: 10px solid rgba(255, 255, 255, .5);
}

body {
  background: pink;
}
<div class="circle"></div>

Вы также можете рассмотреть radial-gradient

div.circle {
  background: 
    radial-gradient(farthest-side, 
      rgba(255, 255, 255, .5) calc(100% - 20px),transparent calc(100% - 20px),
      transparent calc(100% - 10px),rgba(255, 255, 255, .5) calc(100% - 10px));
  height: 180px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50%;
  margin:10px auto;
}

body {
  background: pink;
}
<div class="circle"></div>

Вы можете легко масштабировать до любого количества границ: 

div.circle {
  background: 
    radial-gradient(farthest-side,
      #fff        calc(100% - 61px),transparent calc(100% - 60px), 
      transparent calc(100% - 51px),#fff        calc(100% - 50px),
      #fff        calc(100% - 41px),transparent calc(100% - 40px),
      transparent calc(100% - 31px),#fff        calc(100% - 30px),
      #fff        calc(100% - 21px),transparent calc(100% - 20px),
      transparent calc(100% - 11px),#fff        calc(100% - 10px));
  height: 180px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50%;
  margin:10px auto;
}

body {
  background: pink;
}
<div class="circle"></div>
2 голосов
/ 12 апреля 2019

Вы можете использовать псевдоэлементы ::before и :after, как показано в моем фрагменте.Я добавил и то и другое, но для ваших требований одного, вероятно, будет достаточно:

(Редактировать: я изменил параметры положения, центрировав псевдоэлементы. Таким образом, вам нужно только изменить height и width, если вы хотитеразные размеры) 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #7a4;
}

div.circle {
  background: rgba(255, 255, 255, 0.5);
  height: 400px;
  width: 400px;
  border-radius: 50%;
  margin: auto;
  margin-top: 100px;
  position: relative;
}

.circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 440px;
  width: 440px;
  border-radius: 50%;
  border: 20px solid;
  border-color: rgba(255, 255, 255, 0.5);
}

.circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 520px;
  width: 520px;
  border-radius: 50%;
  border: 20px solid;
  border-color: rgba(255, 255, 255, 0.5);
}
<div class="circle"></div>
...