css3 文本

一、超出部分显示省略号

/*
1.固定宽度
2.定义强制文本在一行内显示(white-space:nowrap)
3.出内容为隐藏(overflow:hidden),
4.使用text-overflow说明文字溢出时用什么方式显示(clip:剪切 ellipsis:省略号)
*/

.text-of{
  width:200px;
  white-space:nowrap;
  overflow:hidden;
  background:#ccc;
  text-overflow:ellipsis;
  -o-text-overflow: ellipsis; /* Opera 9-10 */
}

二、嵌入字体@font-face

@font-face {
  font-family: "AOOC Font";
  src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
.font-face{
  width: 340px;
  padding: 30px;
  color: #566F89;
  font-size:50px;
  font-family: "AOOC Font";
}

三、文本阴影text-shadow

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

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

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

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

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

例如:text-shadow: 0 1px 1px #fff

时间: 2024-10-05 23:18:59

css3 文本的相关文章

CSS3文本温故

1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:text-shadow:none | <length> none | [<shadow>,] * <shadow>或none | <color> [,<color]*也就是:text-shadow:[颜色color] x轴位移(x-offset) y轴位移(y

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

text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是: text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]... 或

CSS3 文本效果

1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px 5px red; 2 CSS3 自动换行在 CSS3 中,word-wrap 属性允许您允许文本强制文本 进行换行 ,对单词进行拆分:word-wrap:break-word; 3 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行. 4 text-emphasis 向元素的文本应用重点标记以

第 21 章 CSS3 文本效果

学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 CSS3 提供了 text-shadow 文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器支持情况. text-shadow Opera Firefox Chrome IE Safari 9.5+ 3.5+ 4+ 10+ 3.1+ 这里有几个注意点:1.text-shadow 在 CSS2 的时

CSS3文本效果

CSS3文本效果实例1: 文本阴影: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 文本阴影</title> <style> h1{text-shadow: 5px 5px 5px #FF0000;} </style> </head> <body> <h1>文本阴影效果

CSS3 文本3D效果

代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: 200px; text-shadow: 0px -1px 0px #858585, 0px 1px 10px rgba(0, 0, 0, 0.6), 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba

CSS3 文本效果(阴影)

CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴影 CSS3 中,text-shadow属性适用于文本阴影. 您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色: <style> h1 { text-shadow: 5px 5px 5px #FF0000; } </style> 1. CSS3 box-shadow属性 CSS3

[HTML] CSS3 文本效果

CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持 Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow 属性. 所有的主流浏览器支持自动换行(word-wrap)属性. 注意: Internet Explorer 9及更早IE版本不支持 text-shadow 属性. CSS3的文本阴影 CSS3中,text-shadow属性

27.CSS3文本效果

第二十一章 CSS3文本效果 **************************************************** *查询适应的最低版本,可以去:"http://caniuse.com"* **************************************************** 一.文本阴影(CSS3提供了text-shadow文本阴影效果) 浏览器支持情况如下 Opera     Firefox     Chrome    IE    Safari

Cool!15个超炫的 CSS3 文本特效【上篇】

每一个网页设计师都希望创建出让用户能够赏识的网站.当然,这是不可能满足每个人的口味的.幸运的是,我们有最强大的工具和资源.实际上,我们非常多的网站模板,框架,内容管理系统,先进的工具和其他的资源可以使用. 这篇文章展示了使用一组使用 CSS3 制作的文本特效,快来欣赏. 您可能感兴趣的相关文章 小伙伴们惊呆了!8个超炫的 Web 效果 8个惊艳的 HTML5 和 JavaScript 特效 10大 Metro UI 风格 Bootstrap 主题 35款精致的 CSS3 和 HTML5 网页模板