CSS３で角丸写真にシャドーを付ける方法

2012/07/17 17:01

このQ&Aのポイント

写真を角丸加工して影を付けたい場合、フォトショップなどで加工したものを貼り付けるしかないのでしょうか。
写真を角丸にすると、長方形のスペースは残ってしまうため、正確な角丸写真を作成するのは難しいです。
写真の角丸化にはCSSの「border-radius」を使用することができますが、影を付ける方法は限られています。

oyajin082
お礼率85% (72/84)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/07/17 23:54 回答No.2

HTML5でしたら、divを使う機会は劇的に減るでしょう。画像の加工の必要はありません。 display:hiddenの必要もありません。 ★置換インライン要素であるimgをblockに変更するだけです。　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ <section class="photo"> 　<h2> 　　<p> 　　　画像を角丸で置いてみる。　　</p> 　　<figure><img src="" width="" height="" alt=""></figure> 　　<p> 　　　スタイルシートは下記のようになります。　　</p> 　　<pre></pre> </section> のHTMLとすると・・・・ ★タブは＿に置換してあります。 <!doctype html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> ＿<link rel="stylesheet" href="css/style.css"> <style media="screen">  </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section class="photo"> ＿＿<h2>画像に影をつける</h2> ＿＿＿<p> ＿＿＿＿画像を角丸で置いてみる。＿＿＿</p> ＿＿＿<figure><img src="./images/5.jpg" width="480" height="360" alt=""></figure> ＿＿＿<p> ＿＿＿＿スタイルシートは下記のようになります。＿＿＿</p> ＿＿＿<pre>section figure img{ display:block; border-radius:20px; box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4); margin:0 auto; }</pre> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>

質問者