CSS技术分享

css设置中英文大小写的属性：

1，text-transform控制文本的大小写

        a，text-transform：capitalize；文本中的每个单词以大写字母开头

        b，text-transform：uppercase；有大写字母

        c，text-transform：lowercase；无大写字母，仅有小写字母。

        d，test-transform：none；默认值

2，font-variant设置文本的大小写

               a， font-variant：small-caps；浏览器会显示小型大写字母的字体

                b，font-variant：normal；默认值

                                                                css控制单词换行的属性

1，word-break自己决定自动换行的处理方法

                a，word-break：normal；使用浏览器默认的换行规则

                b，word-break：keep-all；不允许中文字断开

                c，word-break：break-all;允许在单词内换行，可以强行截断英文单词，达到词内换行效果。

2，word-wrap用来标明是否允许浏览器在单词内进行断句

                a，word-wrap：normal默认值

                b，word-wrap：break-word；在长单词或url地址内部进行换行。将内容在边界内换行（不截断英文单词换行）。

                                                        背景的线性渐变

1，线性渐变：从上到下（默认情况下）

        background：-webkit-linear-gradient（left，red，blue）；

        background：-o-linear-gradlient（left，red，blue）；

        background：-moz-linear-gradient（left，red，blue）；

        background：linear-gradient（to right，red，blue）；

2，线性渐变：对角

        background：-webkit-linear-gradient（left  top，red，blue）；

        background：-o-linear-gradient（left  top，red，blue）；

        background：-moz-linear-gradient（left  top，red，blue）；

        background：linear-gradient（to  bottom  right，red，blue）；

3，带有指定的角度的线性渐变

        background：-（webkit/o/moz/)-linear-gradient(180deg,red,blue);

                                                背景的径向渐变

1，径向渐变的定义：必须至少两种颜色结点，也可以指定渐变的中心，形状（原型或椭圆形），大小。     默认情况下，渐变的中心是center（表是在中心点），渐变的形状是ellipse（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）。

2，background：radial-gradient（red，green，blue）；

3，background：radial-gradient（red  5%，green  5%，blue  60%）；

4，设置形状，它可以是circle或ellipse。circle表示圆形，ellipse表示椭圆形。

                语法：background：radial-gradient（circle，red，yellow，green）；

                                        css背景相关属性

1，background-clip指定背景的显示范围

      background-clip:border-box:默认值

      background-clip:padding-box;背景被裁剪到内边距框    

background-clip:content-box;背景被裁剪到内容框    

-webkit-background-clip:text ;

2，background-origin绘制背景图像时的起点

background-origin:padding-box默认值;

background-origin:border-box背景图像相对于边框盒来定位

background-origin:content-box背景图像相对于内容框来定位

3，background-size背景图的大小

        background-size: 200px 100px;或者background-size:200% 100%;

        background-size:cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

        background-size:contaifun背景图像本身的宽高比例不变进行缩放。

加浏览器内核：

方向：方向没有to， 直接跟的left/right...（两个方向的时候， 浏览器加内核的识别标准跟同一标准不一样）

度数：从右边开始逆时针的方向进行。

                                 css3中transition过度属性

1，transition-property   需要过度的样式，默认是all

2，transition-duration  运动时间，默认是0s

3，transition-delay  延迟时间，默认是0s

4，transition-timing-function     运动形式默认是ease

A，ease:{慢速开始,然后变快、然后慢速结束）

B.linear:(匀速)ease-in:(加速)

  C. ease-out:(减速)          

 D. ease-in-out:(先加速后减速)      

 E. cubic-bezier贝塞尔曲线（ x1,y1. x2.y2 ) http:cubic-bezier.com

F.steps 0实现一个关键逐帧动画的功能       

                                                   transform

 变形属性：transform的所有属性值认值

1，transform：none；默认值

 2、transform: translate (）;移动平移单位是px

3、transform: rotate (）;旋转单位是deg deg度数

4、transform: scale ();缩放没有单位默认值是1

5、transform: skew ();倾斜单位是deg

6、transform: matrix();矩阵

7、transform: perspective 0;景深视距单位是px