最後の仕上げに、CSS講座

P-3.囲み線のグラデーション ページ12

.



囲み線シリーズ。
他作品で出尽くした感ありますが、以外とこれがなかったのです。

▶ソース【𝕤𝕠𝕦𝕣𝕔𝕖】
{
border:太さ 線の種類 #カラーコード;
border-image:linear-gradient(向き,#カラーコード2つ以上);
border-image-slice:1;
}

【border-image-slice】は、削除するのも数値をいじるのもダメです！
規約で禁止しているわけではないですが、バグるので本当にやめておいた方がいいです。

基本のグラデーションはem7様の【CSSメモ】に載っておりますので省略。
【border】も夢乃ふわり様の【占ツクCSS辞典】に載っておりますので省略。
見られないし分からない、という方はこちら(グラデーション)をどうぞ。

線は太い方がいいですね。
2px以上を推奨します。
サンプル用の画像でも2pxにしています。

グラデーションだけでなく、画像も設定できますが、設定が大変なので別にします。
値とプロパティの説明が面倒で……。

▶まとめ【𝕤𝕦𝕞𝕞𝕒𝕣𝕪】
【border-image】で、囲み線にグラデーションをかけられる。

S-7.コメント欄(下段)→←S-6.設定タグ

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す