CSSで枠線をグラデーションで装飾 | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website

背景と疑似要素を使用した方法 背景と疑似要素を使用した方法です。 ※ IE10、IE11に対応 ※ 上下、左右方向のグラデーションに対応 ※ 斜め方向のグラデーションに対応 ※ コンテンツ領域の背景は透明に非対応 ※ 角丸に対応 CSS div.sample { position:relative; z-index:1; border-radius:2em; padding:10px; width:300px; background:linear-gradient(to right, #d00, #00d); text-align:center; } div.sample::before { position:absolute; top:0; left:0; z-index:-1; box-sizing:border-box; border-radius:2em; padding:2px;