css3圆角边框-渐变-(十九)

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偏移量;
          第三个值: 模糊半径;
          第四个值: 扩展半径;
          第五个值: 阴影颜色;
          第六个值: 阴影模式{向内/向外};
          

值	参数	描述
h-shadow	必需的。水平阴影的位置。允许负值	阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边
v-shadow	必需的。垂直阴影的位置。允许负值	阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部
blur	可选。模糊距离	此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊
spread	可选。阴影的大小	此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小
color	可选。阴影的颜色。rgba hex rgb	此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影	此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影

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%);         重复渐变