015day(css控制单词换行的属性，css设置中英文大小写的属性，背景渐变)
用户投稿 学习笔记 442阅读
一、css控制单词换行的属性
1、word-break自己决定自动换行的处理方法
①word-break：normal:使用浏览器默认的换行规则。(英文)
②word-break：keep-all:不允许中文字断开，以符号作为换行的标志。
③word-break：break-all:允许在单词内换行，可以强行截断英文单词，达到词内换行效果。
2、word-wrap用来标明是否允许浏览器在单词内进行断句
①word-wrap：normal 默认值。
②word-wrap：break-word：在长单词或 URL 地址内部进行换行。将内容在边界内换行（不截断英文单词换行）。
二、css设置中英文大小写的属性
1、text-transform控制文本的大小写（转的是小写字母）
①text-transform ：capitalize；文本中的每个单词以大写字母开头。
②text-transform ：uppercase；定义仅有大写字母
③text-transform ：lowercase；定义无大写字母，仅有小写字母。
④text-transform ：none；默认值
2、font-variant 设置文本的大小写
①font-variant：normal；默认值
②font-variant：small-caps；浏览器会显示小型大写字母的字体
三、背景渐变
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
可以指定哪个方向代码如下
加完浏览器内核不能加to
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。
1、线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
线性渐变 - 从上到下（默认情况下）
#grad {
background-image: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background-image: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background-image: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background-image: linear-gradient(red, blue); /* 标准的语法 */
}
线性渐变
线性渐变 - 从左到右
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
线性渐变 - 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left top, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left top, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
带有指定的角度的线性渐变
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}
线性渐变总结：
线性渐变的方向默认从上到下
background/background-image：
linear-gradient(2-多个颜色【颜色中间用逗号分隔】)
linear-gradient（to 方向【1-2个】，2-多个颜色【颜色中间用逗号分隔】）
linear-gradient（度数deg 方向【1-2个】，2-多个颜色【颜色中间用逗号分隔】）
加浏览器内核
方向：方向没有to直接跟的方向【两个方向的时候 浏览器加内核的识别标准和统一标准不一样】
度数：从右边开始逆时针的方向进行
2、径向渐变
带有指定的角度的线性渐变
CSS3 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
径向渐变 - 颜色结点均匀分布（默认情况下）
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
背景的径向渐变 - 颜色结点不均匀分布
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
/* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%);
/* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
/* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}【百分比从小到大写】
设置形状，shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
CSS的重复渐变
线性渐变和径向渐变都属于CSS背景属性中的背景图片（background-image）属性。有时候希望创建在一个元素的背景上重复的渐变“模式”。在没有重复渐变的属性之前，主要通过重复背景图像（使用background-repeat）创建线性重复渐变，但是没有创建重复的径向渐变的类似方式。幸运的是，CSS3通过repeating-linear-gradient和repeating-radial-gradient语法提供了补救方法，可以直接实现重复的渐变效果。
A、重复的线性渐变 repeating-linear-gradient() 函数用于重复线性渐变：
B、重复的径向渐变 repeating-linear-gradient函数用于重复径向渐变：
径向渐变总结：
从中心向四周扩散发出，默认为椭圆状
语法background/background-image：radial-gradient：（2-多个颜色）
在颜色后面添加百分比（从小到大顺序）
形状，颜色
-webkit-radial-gradient（方位颜色）
方位，形状，颜色
重复渐变：repeating（颜色必须跟百分比，否则无法形成重复的渐变的效果）
四、背景相关属性
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:contain; 保持背景图像本身的宽高比例不变进行缩放。
总结：关于背景大小的总结background-size：需要调整背景图片的大小 四类：像素值【单个（宽度设置为固定的像素值，高度百分比增加）/2个像素值（第一个代表宽度，第二个代表高度）】；百分比【单个/2个 参照像素值】 cover背景图片把整个背景全部覆盖；contain一边铺满，另一边等比增加
五、过渡效果
1、transition-property需要过渡的样式 ，默认是 all
2、transition-duration运动时间 默认是 0 s
3、transition-delay 延迟时间 默认是 0 s
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（） 实现一个关键逐帧动画的功能