Maison > Questions et réponses > le corps du texte
P粉4188540482023-08-22 18:31:09
C'est possible et ne nécessite aucun balisage supplémentaire , mais l'utilisation d'un ::after
pseudo-élément .
Il s'agit de placer un pseudo-élément avec un fond dégradé en dessous et de le recadrer. Cela fonctionne dans tous les navigateurs actuels sans préfixes de fournisseur ni hacks (même IE), mais si vous souhaitez prendre en charge les anciennes versions d'IE, vous devriez envisager d'utiliser une solution de secours en couleur unie, javascript et/ou une extension CSS MSIE personnalisée (c'est-à-dire
filter
, vecteur astuces comme CSSPie, etc.).
version jsfiddle) :
@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css'); html { /* 仅用于显示背景不需要是纯色的 */ 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; /* 仅用于显示box-shadow仍然正常工作 */ 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"> 这里有一些文本。<br/> 这里甚至有一个换行!<br/> 太酷了。 </p>
box-shadow
一起工作得很好,无论是否使用inset
P粉7104549102023-08-22 13:21:05
Probablement pas possible, selon les spécifications du W3C :
Cela peut être dû au fait que border-image
certains modèles potentiellement complexes peuvent être adoptés. Si vous souhaitez une bordure d’image circulaire, vous devez en créer une vous-même.