摘要：将内容在边界内换行不截断英文单词换行语法浏览器只在半角空格或连字符的地方进行换行。个人感觉跟类似强行截断英文单词，达到词内换行效果。
CSS3文本 css字体类型属性
font-family, font-style(normal、italic、oblique[倾斜]), font-weight,
font-size-adjust(定义是否强制对文本使用同一尺寸,仅火狐支持),
font-stretch(无浏览器支持), font-variant(定义字体大小写，取值有：normal、small-caps)
这里提一下font-size-adjust：
这个属性为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。 aspect指字体的小写字母 "x" 的高度与
"font-size" 高度之间的比率。
通常aspect值较高的字体具有较好的易读性。在元素下定义了为多种字体定义相同的aspect值，可保证当第一个字体不可用时，浏览器可以找出什么样的font-size使用第二选择字体显示文字。
再提一下font-variant，当其设定的值为small-caps(小写型大写字母)时，字体是这样显示的：
回到刚刚谈的6个文本属性，其中font-family是复合属性中必不可少的属性。此外还有一个复合属性font。
font: font-style font-weight/line-height font-familycss文本类型属性
word-spacing(词间距)、letter-spacing(字符间距)、vertical-align、text-decoration、text-indent、text-align、line-height、
text-transform(定义文本大小写，取值：none,uppercase,lowercase,capitalize)、
text-shadow、white-space(定义文本之间的空白符显示与否)、direction
用法：
text-shadow: [color] x-offset y-offset blur-radius(只能是正值)
这个属性的用法跟box-shadow挺相似的，都是需要定义颜色、x轴偏移、y轴偏移和模糊半径。
但是box-shadow多了一个阴影扩展的属性，位于模糊半径后。
兼容性：
ie9+以及其他主流浏览器。
若想更好地兼容ie，可使用滤镜属性。
E: {filter:shadow(Color= 颜色值, Direction= 数值, Strength= 数值)}
其中Direction用于设定投影方向。
css溢出文本属性——text-overflow
语法：
text-overflow: clip || ellpisis
clip: 简单裁切，不显示省略标记
ellpisis: 文本溢出时显示省略（…）标记
兼容性：
IE6+！！！！以及其他主流浏览器。
使用方法：
先来看clip的情况：
代码：
.clip {
width: 100px;
border: 1px solid saddlebrown;
text-overflow: clip;
}
效果：
明显看出text-overflow没有起到任何裁切的效果。要想这个属性生效，需要配合其他三个属性使用，分别是 over-flow: hidden(定义超出隐藏)、white-space: nowrap(定义文本不换行)、width(元素宽度)。再来看看改进后的代码：
.clip {
width: 100px;
border: 1px solid saddlebrown;
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
}
效果：
现在来看看ellipsis的情况：
同上啦，都是需要配合width、overflow: hidden、white-space: nowrap使用的。
代码：
.clip {
width: 100px;
border: 1px solid saddlebrown;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
效果：
看上去就比clip自然多了。并且这个时候文本输出是完整的，只不过收到了元素容器大小限制无法全部显示出来，这是就用"…"代替隐藏的部分。
css3文本换行在text-overflow的每个例子中都用到了white-space属性，用来禁止文本换行。为了增强文本换行显示的功能，css3中又添加了word-wrap和word-break属性。
word-wrap在CSS3中，word-wrap可以实现长单词和URL地址的自动换行。
语法：
word-wrap: normal | break-word
normal: 浏览器只在半角空格或连字符的地方进行换行。
break-word: 将内容在边界内换行（不截断英文单词换行）
语法：
word-break: normal | break-all | keep-all
normal: 浏览器只在半角空格或连字符的地方进行换行。
keep-all: 不允许字断开。如果是中文把前后标点符号内的一个汉字短语整个换行，英文单词整个换行；如果出现某个英文字符长度超过容器边界，后面的部分将撑破容器。（个人感觉跟normal类似）
break-all: 强行截断英文单词，达到词内换行效果。
这里比较一下word-wrap和word-break的区别：
/*这是测试word-wrap为break-word的box*/
.box {
width: 200px;
word-wrap: break-word;
border: 1px solid sandybrown;
}
/*这是测试word-break为break-all的box*/
.box2 {
width: 200px;
word-break: break-all;
border: 1px solid sandybrown;
}
效果：
附加word-wrap为normal和word-break为keep-all的测试：
white-space这个属性主要用来声明建立布局过程中如何处理元素中的空白符。
语法：
white-space: normal | pre | nowrap | pre-line | pre-wrap | inherit
pre: 类似html中标签效果。
nowrap: 文本不会换行。直至遇到
pre-line: 合并空白符，但是保留换行符。意思是不能有空格，但可以换行。
pre-wrap: 保留空白符和换行符。
现在来测试一下：
html：
css：
white-space: nowrap;
white-space: pre;
white-space: pre-line;
white-space: pre-wrap;
css3新增的颜色定义属性：
rgba(r,g,b,a)、hsl(h,s,l)、hsla(h,s,l,a)
其中a的值为0~1
浏览器兼容性为ie9+以及其他主流浏览器;
这里提一下rgba和opacity为元素设置透明度的区别：
opacity只能为元素的背景设置透明度，并且影响其后代元素，使其后代元素都将继承其透明度。
rgba可以对元素任何具有颜色的属性设置。并且对其后台元素无影响。
因为hsl的使用频率较少，这里就不详细叙述了。可以看看这篇文章：Click here
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111228.html
摘要：将保持背景的原始高度和宽度。对于平铺的重复性背景图像，确保背景图像不会有截断效果。解决屏幕双倍像素下背景图像模糊问题。将大图缩小一倍使用链接或者列表元素的背景图像能和文本一起进行缩放。内联元素背景图像平铺循环方式暂无文章多背景 CSS背景属性 基本属性 background-color: 默认值为transparent，可以以颜色名、rgb(css3新增rgba)、hls(css3中新...
摘要：选择器统览的选择器及其对应的浏览器兼容性前端观察这篇文章已经详细总结了通过测试有如下更正或说明注下述浏览器兼容性以表示，表明以及以上版本。 CSS1、2、3选择器统览 css1、2、3的选择器及其对应的浏览器兼容性前端观察这篇文章已经详细总结了：Click 通过测试：有如下更正或说明： 注：下述浏览器兼容性以x+表示，表明x以及x以上版本。 动态伪类选择器E:active：若E为锚...
摘要：最近在看揭秘，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。举例说明以上的代码有什么问题呢如果需要改变字号，那么同时需要调整行高。那么经过修改后的代码如下关于使用还是还是百分比，需要根据具体情况来决定。 最近在看《css揭秘》，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。希望大家都有所收获。 css编码技巧 尽量减少代码重复 在实践中，代码可维护性的最大要...
摘要：在动画过程中，您能够多次改变这套样式。以百分比来规定改变发生的时间，或者通过关键词和，等价于和。为了获得最佳的浏览器支持，您应该始终定义和选择器。注释请使用动画属性来控制动画的外观，同时将动画与选择器绑定。CSS3 被划分为模块 其中最重要的 CSS3 新增实用模块包括： 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框: 用于创建圆角 border...
摘要：但是根据本司机两年的开发经验来看，在实际开发中很少来使用这个单位。由于基本都是一些实用性的技巧，我就不一一列举了，建议自读。很好很实用的一本书。 第一章 引言 css编码技巧 在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性...
阅读 2877·2023-04-26 02:27
阅读 2586·2021-11-22 13:54
阅读 721·2021-11-12 10:36
阅读 3550·2021-10-09 09:44
阅读 2983·2021-10-09 09:41
阅读 914·2021-09-22 10:02
阅读 2578·2019-08-30 15:56
阅读 2995·2019-08-30 11:02
