z-indexを使用した枠の設定について

質問

z-indexを使用して画像の枠を丸くしたいと思い、
参考URL→http://www.htmq.com/style/z-index.shtml
を参考にしたのですが出来ません。
div.imageboxで作った角丸の枠を画像の上から重ねて画像を角丸にしたいのですが、どうすれば良いのでしょうか。
ちなみにcssやhtmlで画像を背景画像として扱うという方法は私事情で出来ません。申し訳ありません。この方法ならば簡単にできるのですが・・・
下はそのソースです。お願いいたします。
<!-- css -->
div.imagebox{　　　　　　　//枠の設定
height:150px;
width:150px;
display: inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:2;
}img.imagebox{　　　　　　//画像のz-index設定
position:relative;
z-index:1;
}
<!-- html -->
<div class="imagebox">
<img src="画像" width="150" height="150" border="0" class="imagebox">
</div>

回答No.4

Questa

ご質問の趣旨から外れるかもしれませんが、画像に角丸の枠を付けるだけなら、画像に太いボーダーを付けて border-radius で丸めればよいのでは。

div.imagebox{
...
}
img.imagebox{
border:solid 20px #08f;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

ご質問にあるようにボックスを二重化するのであれば、親ボックスに padding と背景色を追加するだけです。（他の回答者と同じ考え方）

div.imagebox{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 20px; /* 追加 */
width: 150px;
height: 150px; /* 追加 */
background-color: #08f;
}
img.imagebox{
/* 削除 */
}

補足

ありがとうございました。みなさんのおかげで解決することが出来ました。

回答No.3

DrFell

線の色や背景を指定されていないのでそのあたりをプラスしてみました。
また、z-indexやpositionは無駄なので取りました。
radiusをサポートしているブラウザで表示させてみてください。

ceo2011 さんの事情もおありでしょうが、ブラウザにも事情がありまして、例えばIE8以下などではこの方式による角丸はサポートされておりませんので、思ったとおりにならないブラウザが多いと思われます。実際に使われるときには、ご注意ください。

ｃｓｓ-----
div.imagebox{
margin:25px;
padding:25px;/*足しました*/
height150px;
width:150px;
border:solid 10px #0088ff;/*足しました*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/*取りました*/
}
.plus{background:#0088ff;}/*1つ目の指定に加え、背景色を追加しました。*/

ｈｔｍｌ-----
<div class="imagebox">
<img src="03.jpg" width="150" height="150" border="0"><!--クラス取りました-->
</div>
<div class="imagebox plus">
<img src="03.jpg" width="150" height="150" border="0">
</div>

補足

ありがとうございました。みなさんのおかげで解決することが出来ました。

回答No.2

dscripty

z-index も position も関係ないから削除して、

隠したつもりが見えちゃってるから、
div.imagebox { ... } に
overflow:hidden をつけてあげればいいんじゃない？

補足

ありがとうございました。みなさんのおかげで解決することが出来ました。

回答No.1

torayoshi

私CSSの専門家ではないので思いっきり思い付きな方法ですが、
div枠はそのままだと幅は100%になるはず。
また、高さはその内容物（この場合は「画像」）より大きくなれない。
なので、幅を指定してpaddingで画像の上下左右空けてやるとか。
http://www16.plala.or.jp/zaq_501/test/test.html
※IEは「標準モード」のみwidthが有効になるようです。

補足

ありがとうございました。みなさんのおかげで解決することが出来ました。