CSS3文本

时间:2021-10-27 07:42:22

1.文字省略

text-overflow:ellipsis;

 overflow:hidden;

white-space:nowrap;

//text-overflow(clip、ellipsis)只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果.

2.使用软件外字体

@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}

//@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。

p {
    font-size :12px;
    font-family : "My Font";
    /*必须项,设置@font-face中font-family同样的值*/
}

3.文字阴影

  text-shadow: X-Offset Y-Offset blur color;

X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;

Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;

Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;

Color:是指阴影的颜色,其可以使用rgba色。

CSS3文本的更多相关文章

  1. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 ...

  2. Cool!15个创意的 CSS3 文本效果【下篇】

    这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...

  3. CSS3文本温故

    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...

  4. HTML 学习笔记 CSS3 (文本效果)

    text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...

  5. &lbrack;HTML&rsqb; CSS3 文本效果

    CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持

  6. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

  7. css3 文本记

    css3 文本 在css文本功能上主要分为三大类:字体,颜色和文本. text-shadow 设置文本阴影 text-shadow:color x-offset y-offset blur-radiu ...

  8. CSS3 文本装饰

    浏览器对CSS3文本特性的支持情况,如下表所示: 浏览器 text-shadow text-overflow word-wrap hyphens Opera 9.5+ 9+.带前缀-o- 10.5+ ...

  9. 第七十八节,CSS3文本效果

    CSS3文本效果 一.文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow       Opera   ...

  10. CSS3 文本效果&lpar;阴影&rpar;

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

随机推荐

  1. MySQL备份原理详解

    备份是数据安全的最后一道防线,对于任何数据丢失的场景,备份虽然不一定能恢复百分之百的数据(取决于备份周期),但至少能将损失降到最低.衡量备份恢复有两个重要的指标:恢复点目标(RPO)和恢复时间目标(R ...

  2. OpenCV 之 编译和配置

    “工欲善其事,必先利其器”,下面介绍在 Win7 32位系统下,用 cmake 编译 OpenCV 的过程. 1  开发环境 1.1  Win7 Windows 7 家庭普通版,Service Pac ...

  3. 01shell入门基础

    01shell入门基础 为什么学习和使用shell编程 shell是一种脚本语言,脚本语言是相对于编译语言而言的.脚本语言不需要编译,由解释器读取程序并且执行其中的语句,而编译语言需要编译成可执行代码 ...

  4. 【点滴javascript】变量与作用域

    基本类型与引用类型 ECMAScript的的变量有两种类型: 基本类型(值类型):简单数据段 引用类型:多个值构成的对象 在变量赋值结束后,解析器必须知道这个变量时基本数据类型还是引用类型,需要注意的 ...

  5. Flow&colon; JavaScript静态类型检查工具

    Flow: JavaScript静态类型检查工具 Flow是Facebook出品的,针对JavaScript的静态类型检查工具.其代码托管在github之上,并遵守BSD开源协议. 关于Flow 它可 ...

  6. Win10 EPLAN新建项目出现&OpenCurlyDoubleQuote;一个内部错误的解决方法”

    [环境] Win10 64bits,EPLAN 2.4 64bits. [表现] 新建项目的时候出现"一个内部错误"的提示,然后软件卡死. [解决方案] 计算机管理--服务--EP ...

  7. 性能测试之LoardRunner 自动关联

    1.什么是自动关联? 2.实例介绍 以下是详细介绍: 自动化关联:它是VuGen提供的自动化扫描关联处理策略,它的原理是对同一个脚本运行和录制时的服务器返回进行比较,来自动查找变化的部分,并且提示是否 ...

  8. MyBatis探究-----返回Map类型数据

    1.使用@MapKey @MapKey:告诉mybatis封装Map的时候使用哪个属性作为Map的key Map<K, V>:键是这条记录的主键key,值是记录封装后的javaBean 1 ...

  9. JS的document&period;links函数使用示例

    ? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g ...

  10. DDD模型领域WF到领域层(十五)

    实现超市的结算系统: 计算相应的优惠方式的接口 public interface ICompute { double GetResultTotalMoney(double TotalMoney); } ...