css学习笔记-css3新增样式

4.CSS3新增样式

圆角

border-radius：左上 右上 右下 左下

如果设置两个值，第一个值表示左上和右下，第二个值表示右上和左下

<div class="radius"></div>

.radius{
    height: 300px;
    width: 300px;
    background-color: red;
    border: 1px solid black;
    margin: 0 auto;
}

在样式中添加 border-radius: 50%;

.radius{
    height: 300px;
    width: 300px;
    background-color: red;
    border: 1px solid black;
    margin: 0 auto;
    border-radius: 50%; 
}

得到

将角度设置为50%可以得到圆形

阴影

box-shadow: x轴偏移量 y轴偏移量 模糊半径 阴影颜色(不设置颜色默认为黑色)

box-shadow:10px 20px 30px blue

<div class="box"></div>

.box{
        height: 300px;
        width: 300px;
        background-color: chartreuse;
        margin: 0 auto;
        border-radius: 50%;
        /* box-shadow: 10px 10px 10px blue; */
    }

添加box-shadow后：

.box{
        height: 300px;
        width: 300px;
        background-color: chartreuse;
        margin: 0 auto;
        border-radius: 50%;
        box-shadow: 10px 10px 10px blue;
    }

形变

旋转(rotate)

旋转前:

<div class="transform"></div>

   .transform{
        width: 300px;
        height: 300px;
        margin: 0 auto;
        background-color: red;
    }

旋转后:

  .transform{
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background-color: red;
        transform: rotate(50deg);
    }

缩放(scale)

transform:scale(倍数)

缩放前：

<div class="transform"></div>

  .transform{
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background-color: red;
        /* transform: rotate(50deg); */
    }

缩放后:

.transform{
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background-color: red;
        /* transform: rotate(50deg); */
        /* 放大1.5倍 */
        transform: scale(1.5);
    }





#### 位移(translate)

**transform:translate(x坐标移动的距离,y坐标移动的距离)**

**距离可以为像素值也可以为百分比**

位移前:

```html
 <div class="transform"></div>

 .transform{
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background-color: red;
        /* transform: rotate(50deg); */
        /* 放大1.5倍 */
        /* transform: scale(1.5); */
        /* transform: translate(100px,100px); */
    }

位移后:

    .transform{
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background-color: red;
        /* transform: rotate(50deg); */
        /* 放大1.5倍 */
        /* transform: scale(1.5); */
        transform: translate(100px,100px);
    }

使得div垂直水平居中的方法

将元素设置为绝对定位，然后用偏移量位移

transform: translate(-50%,-50%);

 .transform{
        width: 300px;
        height: 300px;
        background-color: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }