定番
新着
履歴

CSS3 陰影のサンプル

共通コード
以下のサンプルは共通のコードがあります。
サンプル
コード
外側
サンプル
コード
内側
© 2024 kipure
Top


<style>
.demo.sha1{
        box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
   -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
     -o-box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
    -ms-box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}
</style>


<div class="c">
<div class="t">外側</div>
<div class="demo sha1"></div>
</div>



<style>
.demo.sha2{
        box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
   -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
     -o-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
    -ms-box-shadow: 10px 10px 10px rgba(0,0,0,0.4) inset;
}
</style>



<div class="c">
<div class="t">内側</div>
<div class="demo sha2"></div>
</div>



<style>
.demo {
	width: 100px;
	height: 100px;
	background-color: #33F;
	margin: 10px;
}
</style>