⑦ Градиентная рамка

Продолжим изучение темы CSS3 - рамка. Если пропустили прошлые статьи, то вот ссылки на них:

Значением border-image может выступать не только изображение, но и градиентная заливка.

Полупрозрачная рамка

📷 РИС. 9. ПОЛУПРОЗРАЧНАЯ РАМКА

В качестве одного из цветов выступает transparent. Таким способом можно задавать границы сразу для всех сторон элемента или по отдельности для каждой стороны. Толщина рамки регулируется свойством border-width.

HTML

<div class="wrap"><div class="gradient"></div></div>

CSS

* {box-sizing:border-box;}
.wrap {
height: 200px;
padding: 25px;
background: #00E4F6;
}
.gradient {
height: 150px; 
width: 50%; 
margin: 0 auto;
border: 10px solid transparent;
border-image: linear-gradient(to right, transparent 0%, #ADF2F7 100%);
border-image-slice: 1;
}

Почтовый конверт

📷 РИС. 10. ПОЧТОВЫЙ КОНВЕРТ

HTML

div class="wrap"><div class="gradient"></div></div>

CSS

* {box-sizing:border-box;}
.wrap {
height: 200px;
padding: 25px;
}
.gradient {
height: 150px; 
width: 50%; 
margin: 0 auto;
border: 10px solid transparent;
border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent 30px, transparent 40px);
}

Источник ↗