角丸|影|グラデーション

Tag:

CSS3で表現できるようになった「角丸」、「影」、「グラデーション」の使用例です。

使用例

CSS3の使用例
CSS 表示
カドマル
border-radius
        .boxA{
            width:200px;
            height:50px;
            border:solid 1px #ccc;
            text-align: center;
            border-radius:5px;
        }
        
class=”boxA”

        .boxB{
            width:200px;
            height:200px;
            border:solid 1px #ccc;
            text-align: center;
            border-radius:50%;
        }
        

class=”boxB”

ボックスの影
box-shadow
        .boxC{
            width:200px;
            height:50px;
            border:solid 1px #ccc;
            text-align: center;
            box-shadow:0px 3px 2px #ccc;
        }
        
class=”boxC”

        .boxD{
            width:200px;
            height:50px;
            border:solid 1px #ccc;
            text-align: center;
            box-shadow:3px 0px 2px #ccc;
        }
        
class=”boxD”

        .boxE{
            width:200px;
            height:50px;
            border:solid 1px #ccc;
            text-align: center;
            box-shadow:2px 2px 6px #ccc;
        }
        
class=”boxE”

        .boxF{
            width:200px;
            height:50px;
            border:solid 1px #ccc;
            text-align: center;
            box-shadow:inset 0px 1px 2px #ccc;
        }
        
class=”boxF”

グラデーション
gradient
        .boxG{
            width:200px;
            height:50px;
            text-align: center;
            border:solid 1px #ccc;
            background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
        }
        
class=”boxG”

        .boxH{
            width:200px;
            height:50px;
            text-align: center;
            border:solid 1px #ccc;
            background-color: #C9E8F1;
            background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
        }
        
class=”boxH”

透明
opacity
        .boxI{
            width:200px;
            height:50px;
            text-align: center;
            border:solid 1px #ccc;
            background-color: #C9E8F1;
        }

        .boxI:hover{
            opacity:0.7;
        }
        
class=”boxI”

スポンサーリンク