H5-30 CSS3 新特性

1、圆角

　　使用CSS3 border-radius 属性，你可以给任何元素制作“圆角”

　　border-radius属性，可以使用以下规则：

　　①四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角

　　②三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角

　　③两个值：第一个值为左上角与右下角，第二个值为右上角与左下角

　　④一个值：四个圆角值相同

　　

    <div class="a1"></div>

    <div class="a2"></div>

    <div class="a3"></div>

 

.a1{

            width: 100px;

            height: 100px;

            background-color: blueviolet;

            border-radius: 10px;

        }

        .a2{

            width: 100px;

            height: 100px;

            background-color: blueviolet;

            border-radius: 100%;

        }

        .a3{

            width: 100px;

            height: 100px;

            background-color: blueviolet;

            border-radius: 10px 50px 30px 10px;

        }

 2、阴影

box-shadow向框添加一个或多个阴影。

　　box-shadow：h-shadow v-shadow blue color;

值	描述
h-shadow	必选，水平阴影的位置
v-shadow	必选，垂直阴影的位置
blue	可选，模糊距离
color	可选阴影的颜色

 

　　

 

 

 

 <div class="a1"></div>

    <div class="a2"></div>

    <div class="a3"></div>

 

        .a1{

            width: 400px;

            height: 400px;

            background-color: blueviolet;

            margin: 0 auto;

            box-shadow:  10px 10px 20px rgb(0, 0,0.5 );

        }

        .a2{

            width: 400px;

            height: 400px;

            background-color: blue;

            margin: 0 auto;

            box-shadow:  -10px -10px 20px rgb(0, 0,0.5 );

           

        }

        .a3{

            width: 400px;

            height: 400px;

            background-color: red;

            margin: 0 auto;

            box-shadow:  0px 10px 20px rgb(0, 0,0.5 );

           

        }