2

вот так должен быть бордер

.Rectangle-5 {
	margin: 51px 0px 0px 35px;
  display: inline-block;	
  width: 370px;
  height: 280px;
  border-radius: 3px;
/*  border-style: solid;
  border-width: 1px;*/
  border: 1px dashed;
  border-image-source: linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f);
  border-image-slice: 1;
}
<div class="Rectangle-5"></div>

Есть такой квадрат.но как сделать его рамку dotted или dashed при том чтобы цвета не менялись?

2 ответа 2

1

Добавляем три свойства background-image, background-origin, background-clip. С цветами дальше просто поиграться, чтобы получить что хочется

.Rectangle-5 {
	margin: 51px 0px 0px 35px;
  display: inline-block;	
  width: 370px;
  height: 280px;
  border-radius: 3px;
  border: 1px dashed;
  background-image: linear-gradient(white, white), linear-gradient(blue, magenta);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
<div class="Rectangle-5"></div>

1
  • @Kniha m вы меня не поняли я загрузил изображение как должно выглядеть border.
    – Randall
    28 окт 2017 в 9:12
1

.Rectangle-5 {
  margin: 51px 0px 0px 35px;
  display: inline-block;	
  width: 370px;
  height: 280px;
  border-radius: 3px;
  border: 1px dashed;
  border-image-source: linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f);
  border-image-slice: 1;
  
  position: relative;
  background: white;
}

.Rectangle-5:after {
  top:-1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  content:'';
  position: absolute;
  display: block;
  z-index: 1;
    
  background-image: 
  linear-gradient(to right, transparent 50%, white 0),
  linear-gradient(to right, transparent 50%, white 0),
  linear-gradient(to top, transparent 50%, white 0),
  linear-gradient(to top, transparent 50%, white 0);
  background-size: 5px 1px, 5px 1px, 1px 5px, 1px 5px;
  background-position: top, bottom, left, right;
  background-repeat: repeat-x,repeat-x,repeat-y,repeat-y;
}
<div class="Rectangle-5"></div>

Цвет white в background-image надо заменить на цвет фона, который необходим. Редактировать ширину пунктирных полосок можно с помощью background-size.

1
  • вы меня не поняли я загрузил изображение как должно выглядеть border.
    – Randall
    28 окт 2017 в 9:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.