本文详细介绍了CSS中用于控制单词换行的`word-break`和`word-wrap`属性，以及调整文本大小写的`text-transform`和`font-variant`属性。同时，讲解了背景属性`background-clip`、`background-origin`和`background-size`的用法，以及CSS过渡效果中的`transition`属性，包括`transition-property`、`transition-duration`、`transition-delay`和`transition-timing-function`。这些知识点对于前端开发者理解和创建动态、响应式的网页至关重要。
CSS控制单词换行得属性：
word-break：自己决定自动换行得处理方式
normal：默认值
keep-all：不允许文字断开
break-all：可以截断单词换行，然后进行换行
word-wrap：用来表明是否允许浏览器在单词内进行断句
nomal 默认值
break-word：在单词内部换行
CSS设置中英文大小写得属性
text-transform：控制文本得大小写
capitalize：字体为英文字母时，开头的第一个首字母设置为大写
lowercase ： 定义没有大写字母，全部为小写字母。
uppercase： 设置英文字母全部为大写
font-variant：设置文本得大小写
small-caps：设置英文字母全部为大写，然后字体缩小,原有的大写字母不变
CSS中背景相关得属性：
A、background-clip：指定背景得显示范围
1、background-clip:border-box; 默认值
2、background-clip:padding-box；背景被裁剪到内边距框
3、background-clip:content-box；背景被裁剪到内容框
4、 -webkit-background-clip:text ；
B、background-origin 绘制背景图像时得起点
1、background-origin:padding-box 默认值； 2、background-origin:border-box 背景图像相对于边框盒来定位
3、background-origin:content-box 背景图像相对于内容框来定位
background-size ：背景图的大小
1、background-size：200px 100px; 或者 background-size:200% 100%;
2、 background-size:cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
3、 background-size:contain; 保持背景图像本身的宽高比例不变进行缩放。
CSS中Transition过渡属性
transition-property ：需要过渡的样式 ，默认是 all
transition-duration ：运动时间 默认是 0 s
ransition-delay ：延迟时间 默认是 0 s
transition-timing-function ：
动形式 默认是 ease
1、 ease：（慢速开始，然后变快，然后慢速结束）
2、 linear：（匀速） ease-in：(加速)
3、ease-out：（减速）
4、 ease-in-out：（先加速后减速）
5、 cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 http:cubic-bezier.com
6、steps（） 实现一个关键逐帧动画的功能
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
