010-Web前端-CSS动画- 圆角/阴影/渐变

#6.2 圆角、阴影、渐变

---

CSS3是CSS（层叠样式表）技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。

---

圆角border-radius

border-radius：value；四个角

border-radius：value value；左上右下、右上左下

border-radius：value value value value；代表设置对象左上、右上、右下、左下角

#####设置圆心距时要把border宽度也设置进去！

---

阴影shadow

盒阴影box-shadow

语法：box-shadow: h-shadow v-shadow blur spread color inset;

e.g.     box-shadow: 10px 10px 5px 3px darkred;

文字阴影text-shadow

语法：text-shadow: h-shadow v-shadow blur color;

e.g.     text-shadow: 10px -5px 5px pink ;

---

CSS3渐变

CSS3 定义了两种类型的渐变（gradients）：

1.线性渐变（Linear Gradients）- 向下（默认）/向上/向左/向右/对角方向

background: linear-gradient(direction, color-stop1, color-stop2, …);

e.g. to right, to right bottom(webkit内核：left top),80deg(12点为零度，3点为90度)…

-repeating-重复渐变：0-10-20%红-黄-绿渐变

e.g. -webkit-repeating-linear-gradient(red,yellow 10%,green 20%);

 

2.径向渐变（Radial Gradients）- 由它们的中心定义

background: radial-gradient(center, shape， size, start-color, ..., last-color);

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形）

需要设置的参数：

1.颜色（可以设置多个）

2.中心(at center center)

都是从左上角原点为参考

X，Y可以是像素(at 30px 50px ) 或百分比(at 10% 30%)

也可以是top left  right center bottom(at left bottom)

3.大小

closest-side(最近边) farthest-side(最远边)

closest-corner(最近角) farthest-corner（最远角，默认值）

4.形状

ellipse(椭圆，默认值) circle(圆)

---

#未完待续