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

解決済

質問者：oyajin082
質問日時：2012/07/17 17:01
回答数：2件

現在独学でＨＴＭＬ５とＣＳＳ３の勉強をしています。

写真を角丸加工してそれにＣＳＳで「box-shadow」プロパティで影を付けようとすると、角丸でカットした部分が白く残ってしまいます。

また、「border-radius」で角丸にしても同じです。

写真のサイズを300×225ｐｘにした場合、写真を角丸にしても（カット部分は透明にしてあります）、ボーダーで角丸にしても結局は長方形のスペースはそのまま残ってしまうと言う事ですか。

写真を角丸加工して影を付けたい場合は、フォトショップなどで加工したものを貼り付けるしかないのでしょうか。

ごまかしで右隅のカットした部分を黒に塗っておけばそれらしくは見えるのですが。

ＣＳＳで処理ができれば１回の設定でできると考えたのですが、やはり甘い考えだったのでしょうか。

宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2012/07/17 23:54

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>