角丸影付きのボックスを投稿記事内に挿入する

最終更新日:2015-12-24

角丸影付きのボックスを投稿記事内に挿入する方法についての覚書です。

角丸影付きのボックスです。


以下のCSSを追加して、

.marukage {
border:1px solid #c0c0c0;
width:98%;
min-height:150px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow:1px 1px 3px #c0c0c0;
-webkit-box-shadow:1px 1px 3px #c0c0c0;
box-shadow:1px 1px 3px #c0c0c0;
background-color:#f7f7f7;
margin:10px;
padding:10px;
}

投稿記事内に以下のように記述すると、

<div class="marukage">角丸影付きのボックスです。</div>

影付きの角丸ボックスを表示することができます。(旧バージョンのIEを除く。)

角丸影付きのボックスです。


参考にした記事:CSS で簡単にできるエレガントなボックス – Web/DB プログラミング徹底解説

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。