CSS3文本温故

作者：青春快乐1 | 来源：互联网 | 2023-09-09 12:59

1.CSS早期属性，分为三大类：字体、颜色和文本：

CSS3文本温故

2.CSS文本类型有11个属性：

CSS3文本温故

注：还有一个颜色属性：color，主要用来设置文本颜色

3.CSS3文本阴影属性：text-shadow
语法：text-shadow:none | none | [,] * 或none | [,也就是：text-shadow:[颜色color] x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius), *
color：阴影颜色，定义绘制阴影是所使用的颜色，这个参数可以放在第一也可以放在最后，是一个可选参数，如果没有将使用文本颜色作为阴影颜色，可以是：颜色关键词、十六进制颜色、RGB颜色、RGBA透明色等
x-offset：X轴位移，用来指定阴影水平位移量，其值可以是正负值，为正值，阴影在对象的右边，反之阴影在对象的左边
y-offset：Y轴位移，用来指定阴影垂直方向偏移量，其值可以是正负值，如果为正值，阴影在对象的底部，反之阴影在对象的顶部
blur-radius：阴影模糊半径，可选参数，用来设置阴影的模糊半径，代表阴影向外模糊的模糊范围。这个值越大，阴影向外模糊的范围越大，阴影的边缘就越模糊。不过这个值只能是正值，其值为0时，表示阴影不具有模糊效果
注：可以指定多个阴影，并且可以独立调整。指定多个阴影时使用逗号将多个阴影进行分隔。多个阴影效果按照给定的顺序应用，因此前面的阴影有可能会覆盖后面的，但是但是永远不会覆盖文本本身

浏览器兼容性

CSS3文本温故

IE的兼容问题，只好使用滤镜filter:shadow来处理。filter:shadow滤镜作用与dropshadow类似，也能是对象产生阴影效果，不同的是dropshadow可以产生渐进效果，是阴影显得更平滑细腻
E {filter:shadow(Color=颜色值, Direction=数值, Strength=数值)}

浏览器兼容性
IE的兼容问题，只好使用滤镜filter:shadow来处理。filter:shadow滤镜作用与dropshadow类似，也能是对象产生阴影效果，不同的是dropshadow可以产生渐进效果，是阴影显得更平滑细腻
E {filter:shadow(Color=颜色值, Direction=数值, Strength=数值)}
E是元素选择器
Color用于设定对象的阴影颜色
Direction用于设定投影的方向，取值为0度，阴影在文本上面；45度，阴影在文本右上角；90度，阴影在文本右边；135度，阴影在文本右下角；180度，阴影在文本下方；225度，阴影在文本左下方；270度，阴影在文本左边；315度，阴影在文本左上方
Strength就是阴影强度，类似于text-shadow的模糊半径
注：滤镜制作阴影效果和text-shadow制作效果相差甚远

4.CSS3溢出文本属性：text-overflow
语法及参数：text-overlfow:clip | ellipsis
只有两个属性值：
clip：不显示省略标记（···），只是简单的裁切
ellipsis：文本溢出时显示省略标记（···），省略标记插入的位置是最后一个字符
要想实现文本溢出时裁切文本显示省略标记（···）效果，还需要两个属性的配合；强制文本在一行显示（white-space:nowrap）和溢出内容隐藏（overflow:hidden）,并且需要定义容器的宽度

浏览器兼容性

CSS3文本温故

注：text-overflow属性在IE系列下得到较好的支持，直到Firefox 6才开始支持text-overflow:ellipsis属性的应用，而Opera浏览器下还需要加其独有的前缀【-o-】才能识别

5.CSS3文本换行
浏览器自身都带有让文本换行的功能。对于西方文本来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的中间突然换行；对于中文来说，可以在任何一个文字后面换行，但浏览器碰到标点符号时，通常将标点符号和标点前面的一个文字作为一个整体统一换行
white-space属性，用来禁止文本换行
word-wrap属性，器属于IE的专有属性
有时文本不会自动换行，解决办法：
（1）overflow:auto，用滚动条来控制
（2）overflow:hidden，直接隐藏掉，来达到布局的完美性
（3）通过Javascript脚本来控制
（4）使用CSS3新属性word-wrap属性

word-wrap属性
在CSS3中，使用word-wrap属性实现长单词与URL地址的自动换行
语法及参数：word-wrap:normal | break-word
normal：默认值，浏览器只在半角空格或连字符的地方进行换行。
break-word：将内容在边界内换行（不截取英文单词换行），长文本和URL地址都自动换行了，唯一不完美的是，它不会按单词换行，直接将长单词截断换行，增加阅读的难度
注：word-wrap应用在

和中时，是没有任何效果
浏览器兼容性：

CSS3文本温故

6.word-break属性
来决定自动换行的处理方法，通过具体的属性设置，不仅仅可以让浏览器实现半角空格或连字符后面的换行，而且还可以让浏览器实现任意位置的换行
语法及参数：word-break:normal | break-all | keep-all
normal：默认值，根据语言自己的规则确定换行方式，中文到边界上的汉子换行，英文从整个单词换行
break-all：可以强行截断英文单词，达到词内换行效果
keep-all：不允许子断开。如果是中文把前后标点符号内的一个汉字短语整个换行，英文单词整个换行；如果出现某个英文字符长度超过容器边界，后面的部分将撑破容器；如果边框为固定属性，则后面部分无法显示

浏览器兼容性

CSS3文本温故

7.white-space属性
用来声明建立布局过程中如何处理元素中的空白符
语法及参数：white-space:normal || pre || nowrap || pre-line || pro-wrap || inherit
取值说明：
normal：默认值。空白处会被浏览器忽略。可以通过这个值恢复到属性的默认值
pre：文本空白处会被浏览器扣留，其行为方式类似于HTML中的

标签效果
nowrap：文本不会换行，文本会在同一行上，直到碰到换行标签
为止
pre-line：合并空白符序列，但保留换行符，此属性不支持IE7.0、Firefox3.0和Opera9.2以下版本浏览器
pro-wrap：保留空白符序列，但是正常进行换行，此属性值不支持IE7.0和Firefox3.0以下版本浏览器
inherit：继承父元素的white-space属性值，次属性值在所有的IE浏览器都不支持
浏览器兼容性

CSS3文本温故

更多专业前端知识，请上【猿2048】www.mk2048.com

推荐阅读

php
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
php
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
php
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
header
ASP.NET2.0数据教程之十四：使用FormView的模板

本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观，与GridView和DetailsView不同，FormView使用模板来呈现，可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]

蜡笔小新 2023-12-13 08:07:00
header
Html5-Canvas实现简易的抽奖转盘效果

本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]

蜡笔小新 2023-12-13 06:02:20
window
用Vue实现的Demo商品管理效果图及实现代码

本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]

蜡笔小新 2023-12-10 15:14:25
window
Android开发笔记：使用Picasso加载网络图片等比例缩放

在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]

蜡笔小新 2023-12-14 17:34:00
window
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
window
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
php
PHP实现断点续传乱序合并文件的方法和源码

本文介绍了使用PHP实现断点续传乱序合并文件的方法和源码。由于网络原因，文件需要分割成多个部分发送，因此无法按顺序接收。文章中提供了merge2.php的源码，通过使用shuffle函数打乱文件读取顺序，实现了乱序合并文件的功能。同时，还介绍了filesize、glob、unlink、fopen等相关函数的使用。阅读本文可以了解如何使用PHP实现断点续传乱序合并文件的具体步骤。 ... [详细]

蜡笔小新 2023-12-14 04:33:19
uri
开发笔记：解决播放框架内容安全策略设置不起作用的问题

本文介绍了作者在开发过程中遇到的问题，即播放框架内容安全策略设置不起作用的错误。作者通过使用编译时依赖注入的方式解决了这个问题，并分享了解决方案。文章详细描述了问题的出现情况、错误输出内容以及解决方案的具体步骤。如果你也遇到了类似的问题，本文可能对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-12-13 16:03:19
sum
Oracle优化新常态的五大禁止及其性能隐患

本文介绍了Oracle优化新常态中的五大禁止措施，包括禁止外键、禁止视图、禁止触发器、禁止存储过程和禁止JOB，并分析了这些禁止措施可能带来的性能隐患。文章还讨论了这些禁止措施在C/S架构和B/S架构中的不同应用情况，并提出了解决方案。 ... [详细]

蜡笔小新 2023-12-12 12:55:55
sum
Java的公式汇总及相关知识介绍

本文介绍了Java的公式汇总及相关知识，包括定义变量的语法格式、类型转换公式、三元表达式、定义新的实例的格式、引用类型的方法以及数组静态初始化等内容。希望对读者有一定的参考价值。 ... [详细]

蜡笔小新 2023-12-11 16:30:10
php
微软的STL容器类实现是否线程安全？

本文讨论了微软的STL容器类是否线程安全。根据MSDN的回答，STL容器类包括vector、deque、list、queue、stack、priority_queue、valarray、map、hash_map、multimap、hash_multimap、set、hash_set、multiset、hash_multiset、basic_string和bitset。对于单个对象来说，多个线程同时读取是安全的。但如果一个线程正在写入一个对象，那么所有的读写操作都需要进行同步。 ... [详细]

蜡笔小新 2023-12-11 11:53:23
copy
图片处理应用：固定容器缩略图实现

本文介绍了一种图片处理应用，通过固定容器来实现缩略图的功能。该方法可以实现等比例缩略、扩容填充和裁剪等操作。详细的实现步骤和代码示例在正文中给出。 ... [详细]

蜡笔小新 2023-12-10 18:52:53

青春快乐1

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章