大家好，欢迎来到IT知识分享网。

css3新增样式

border-radius: 1-4 length|% / 1-4 length|%;
/* xy合并参数写法 */
border-radius: 10px 20px 30px 40px;border-radius: top-left top-right bottom-right bottom-left
/* 全参数写法 */
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y

1.border-radius 圆角边框,给盒子添加边角.

border-radius: 50%
;      指对应盒子宽度高度的50%;

border-radius: 4px;       指边框左上  右上  右下 左下四个角弧度为                             4px       

用法和边框属性一样,可以四角分别设置.

下面是复合写法与单例写法:

复合写法:
border-radius: 2em;
单例写法:
border-top-left-radius: 2em;   上左圆角边框;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;  

复合写法1-4个值对应:

• 一个值: 左上右上左下右下
• 两个值: 左上右下 右上左下
• 三个值:左上 右上左下 右下
• 四个值:左上 右上 右下 左下

2.box-shadow 边框阴影,也可以用来做叠加,给盒子添加阴影效果.

box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 22px -10px 10px 0 #cc insert;
          第一个值: x偏移量;
          第二个值: y偏移量;
          第三个值: 模糊半径;
          第四个值: 扩展半径;
          第五个值: 阴影颜色;
          第六个值: 阴影模式{向内/向外};
          

box-shadius的属性值 可以叠加,就是一个属性可以设置多个值,用逗号分隔

box-shadow: h-shadow v-shadow blur spread color inset,
            h-shadow v-shadow blur spread color inset;

3.渐变色,可以让你在两个或多个颜色之间显示平稳的过渡.

css3的渐变类型:

• 线性渐变(linear gradients)
• 径向渐变(radial gradients)

线性渐变_____________________

background-image: linear-gradient(#e66465, #9198e5);
                           从上到下渐变(默认情况)
background-image: linear-gradient(to right, red, green);
                           从左到右
background-image: linear-gradient(to bottom right, red, blue);
                          从左上到右下;
backgroun-image: linear-gradient(-90deg, red, blue);
                          从任意角度渐变

这里任意角度-90deg表示将创建一个从右到左的渐变,角度是指水平线和渐变线之间的角度.

但是,请注意很多浏览器都使用的是老的旧标准,即0deg将创建一个从左到右的渐变,90deg将创建一个从上到下的渐变.公式为90 – x = y 其中 x 为标准角度，y为非标准角度。

多种颜色

background-image: linear-gradient(to right, red, blue, orange, yellow, green, blue, indigo, violet);

使用透明度

   ~~~

background-image: linear-greadient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
~~~

重复线性渐变

background-image: linear-gredient(circle, red, yellow 10%, green 20%);

径向渐变_________________

中心向外扩展.

background-image: radial-gradient(shape, size, at posiition, start-color, ...,  last-color);
   注:shape 形状     circle圆形     ellipse 椭圆形    默认是椭圆

示例:

background-image: radial-gradient(red, green, yellow);
                    默认渐变
background-image: radial-gradient(red 5%, yellow 10%, green 10%);               按照比例渐变

background-image: radial-gradient(circle, red, yellow, green);             按照形状渐变,默认是椭圆

background-image: repeating-radial-gradient(red, yellow 10%, 	green 15%);         重复渐变