CSSで凹んで見えるラインを表現する

CSSで凹んで見えるラインを表現する

CSSを使ってへこんでいるように見えるラインを表現する方法です。

くぼんだラインはbox-shadowプロパティを使って表現することができます。

サンプル

基本のコード

以下のコードにCSSを追加しています。

sample00
sample00
.sample {
padding:50px 20px;
color: #fff;
background: #666;
}

要素の下にラインを引く

sample01
.sample div {
border-bottom: 1px solid #333;
box-shadow: 0px 1px 0px #999;
}

要素の上にラインを引く

sample02
.sample div {
border-top: 1px solid #999;
box-shadow: 0px -1px 0px #333;
}

要素の右にラインを引く

sample03
.sample div {
border-right: 1px solid #333;
box-shadow: 1px 0px 0px #999;
}

要素の左にラインを引く

sample04
.sample div {
border-left: 1px solid #999;
box-shadow: -1px 0px 0px #333;
}

参考サイト

最近流行のくぼんだ線をCSSで表現 | sdora Et Cetera

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事