CSS3-border变化

border-radius

上节课我们学习了如何制作圆形，现在我们来学习一下，如何制作扇形，这里还是要使用到我们的border-radius,现在我们改如何做那？那就是从他的值进行改变，他的盒子我们要给到一个一致的高宽，四个值我们给到他50%或（100px） 0 0 0；

再来学习一个半圆形，首先注意的是他的盒子我们要给一个长方形的盒子，我这边直接给出值，可以自己动手练习一下： 50px  50px  0  0 ;

盒子阴影

Box-shadow:inset x-offset y-offset blur-redius color;

        内阴影类型    x轴       y轴      模糊半径  颜色

inset不添加就是外阴影，默认类型也是外阴影

background-size

他有两个值来控制他的大小，x轴与y轴，如果止写一个值另一个默认atuo

background-size：”cover" 覆盖背景区域的最小大小 

background-size：”contain” 缩放背景区域的最大大小 不会完全覆盖背景图会以照片为主来缩放

文本添加阴影

text-shadow属性 给文本添加阴影

 text-shadow：他的值跟 盒子阴影是一样的 可以参考，x y 范围 颜色。

white-break:break-all 对于英语单词数字没有空格的就会破坏让他们换行。

white-space:nowrap 让文字不换行

overflow：hidden，将超出盒子的文字隐藏

text-overflow 属性

text-overflow:ellipsis  用于处理溢出的文本，用省略号来代表超出的文本

word-break: break-all; 文本换行

display: -webkit-box;改成谷歌内核的弹性盒子

-webkit-line-clamp: 2;展示的行数

-webkit-box-orient: vertical; 纵向排列文字

CSS3渐变

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

一般是来给背景图来更改颜色的书写方式如下：颜色也可以可比例

background: linear-gradient( to right,red, green, blue); 

                    线性渐变      方向（取方向相反）   颜色（颜色可多个）

径向渐变：颜色结点均匀分布的径向渐变，，默认椭圆形

background: radial-gradient(red 5%, green 15%, blue 60%);

                         径向渐变        颜色（颜色可多个）

圆形渐变：形状为圆形的径向渐变

background: radial-gradient(circle, red, yellow, green);

                                                 圆形渐变   颜色（颜色可多个 ）