Как использовать радиальный градиент с изображением границы - PullRequest
Новая
       63

Как использовать радиальный градиент с изображением границы

0 голосов
/ 03 июля 2018

Я пытаюсь использовать изображение границы, где источником является радиальный градиент. Я видел множество примеров с изображениями, но не видел ни одного с радиальными градиентами.

Полный пример в Мой CodePen 

#main {
  width: 200px;
  border: 8px solid red;
  padding: 10px;
  border-image:
      radial-gradient( farthest-corner, #777 50%, #7770 60%)  /* source */
      28 /                    /* slice */
      8px 8px 8px 8px /    /* width */
      4px 4px 4px 4px       /* outset */
      round;                  /* repeat */
}

Я просто хочу заключить прямоугольник в маленькие кружки, расположенные на расстоянии нескольких пикселей друг от друга, предпочтительно используя решение только для CSS. Хотя я рад слышать другие вопросы

1 Ответ

0 голосов
/ 03 июля 2018

Вы можете сделать это с фоном, как это: 

#main {
  width: 200px;
  padding:10px;
  background: 
   radial-gradient(circle at center, #777 60%, transparent 61%) top left/10px 10px repeat-x,
   radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-x;
}
<div id="main">This element is surrounded by a radial-gradient-based border image!</div>

Если вам нужны все стороны, вы можете сделать это: 

#main {
  width: 200px;
  padding:13px 10px;
  background: 
   radial-gradient(circle at center, #777 60%, transparent 61%) top left/10px 10px repeat-x,
   radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-x,
   radial-gradient(circle at center, #777 60%, transparent 61%) bottom left/10px 10px repeat-y,
   radial-gradient(circle at center, #777 60%, transparent 61%) bottom right/10px 10px repeat-y;
}
<div id="main">This element is surrounded by a radial-gradient-based border image!</div>
...