CSS3新添样式

圆角边框

border-radius:四个值
使用该属性时，可以设置圆形；即将其值设置为50%即可；同时也可以设置半圆形状
    -半圆
    制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
    制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
​
    -扇形
        利用border-radius属性制作扇形遵循“三同，一不同”原则
        “三同”是元素宽度、高度、圆角半径相同
        “一不同”是圆角取值位置不同
            例：border-radius:0 0 50px 0;

盒子阴影

box-shadow:
        -nset       阴影类型内阴影
        x-offset    x轴，指定阴影水平（向右设负值即可）位移量
        y-offset    y轴，指定阴影垂直（向上设负值即可）位移量
        blur-radius 阴影向外模糊的范围
        color       阴影的颜色

线性渐变//颜色渐变

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等径向渐变

liner-gradoent(postion,color, color)

例子：这是从官网上查询看的，好像不支持使用 bg-c（背景颜色）可应用于bg-image

//从上到下的线性渐变：
 background-image: linear-gradient(#e66465, #9198e5);
//从左到右的线性渐变：
 background-image: linear-gradient(to right, red , yellow);
//从左上角到右下角的线性渐变：
 background-image: linear-gradient(to bottom right, red, yellow);
//带有指定的角度的线性渐变：
    0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。[公式 90 - x = y 其中 x 为标准角度，y为非标准角度]
 background-image: linear-gradient(-90deg, red, yellow);

圆形或椭圆渐变：

颜色不再沿着一条直线变化，而是从一个起点朝所有方向混 合

解决渐变兼容性问题：

IE浏览器前需要添加 -ms-

谷歌/苹果浏览器 为webkit内核，需要添加前缀;-webkit-

Opera欧鹏，需要加-o-

火狐为Mozilla,需要加 -moz-

变形 transform:[]

translate:平移函数
​
scale(): 缩放函数
​
rotate():旋转函数
​
skew():倾斜函数