Это возможно, и не требует дополнительной разметки , но использует ::after псевдоэлемент .
Это включает в себя размещение псевдоэлемента с градиентным фоном ниже и отсечение этого.Это работает во всех текущих браузерах без префиксов или хаков поставщиков (даже IE), но если вы хотите поддерживать старинные версии IE, вам следует рассмотреть возможность использования однотонных запасных вариантов, javascript и / или пользовательских расширений MSIE CSS (например, filter, CSSPie-подобные векторные трюки и т. Д.).
Вот живой пример ( jsfiddle версия ):
@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css');
html {
/* just for showing that background doesn't need to be solid */
background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%);
padding: 10px;
}
.grounded-radiants {
position: relative;
border: 4px solid transparent;
border-radius: 16px;
background: linear-gradient(orange, violet);
background-clip: padding-box;
padding: 10px;
/* just to show box-shadow still works fine */
box-shadow: 0 3px 9px black, inset 0 0 9px white;
}
.grounded-radiants::after {
position: absolute;
top: -4px; bottom: -4px;
left: -4px; right: -4px;
background: linear-gradient(red, blue);
content: '';
z-index: -1;
border-radius: 16px;
}
<p class="grounded-radiants">
Some text is here.<br/>
There's even a line break!<br/>
so cool.
</p>
Дополнительный стиль выше показывает:
- Это работает с любым фоном
- Работает просто отличнос
box-shadow, inset или без - Не требуется добавлять тень к псевдоэлементу
Опять же, это работает с IE, Firefox и Webkit / Blinkбраузеры.