[CSS]画像の四辺のボーダーを一味違ったスタイルにするチュートリアル

画像の四辺をシンプルな1pxのボーダーではなく、一味違ったスタイルにするチュートリアルを紹介します。

デモのキャプチャ

Fancy Inset CSS Image Borders
デモ
※キャプチャは500%拡大

拡大では分かりにくいと思うので、全景は下記をどうぞ。

デモのキャプチャ

デモのキャプチャ(100%)
※クリックで全表示

実装は下記のようになります。

HTML

疑似要素「:after」を使用するため、spanでimg要素を内包します。

CSS

疑似要素「:after」を使用して、スタイルを適用します。

sponsors

top of page

©2018 coliss