【HTML5学习笔记】28:CSS3文本效果
来源:互联网 发布:手机dj软件 编辑:程序博客网 时间:2024/06/05 14:16
本节学习CSS3中一些文本属性的设置。
[1]文本阴影
text-shadow: 横向 纵向 模糊度 颜色;
可以作多重阴影叠加。
[2]文本裁剪
把溢出的部分裁剪掉,然后判断是否加省略号。要配合其它属性一起用。
不能换行:
white-space: nowrap;
控制溢出:
overflow: hidden;
裁剪后不添加省略号:
text-overflow: clip;
裁剪后添加省略号:
text-overflow: ellipsis;
*这两个属性的测试
<!DOCTYPE html><html lang="zh-cn"><head> <title>CSS3文本效果</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <p>我是HTML5</p></html>
@charset "utf-8";p{ background: #e9dfd1; width: 160px; font-size: 50px; color: #f1ebe5; text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
测试结果:
[3]文本描边(实验阶段)
-webkit-text-stroke: 描边量 颜色;
[4]文本填充(实验阶段)
-webkit-text-fill-color: 填充什么;
它单独用起来和改变自己颜色没什么区别,但可以和其它CSS属性搭配产生新的效果。
*这两个属性的测试
<!DOCTYPE html><html lang="zh-cn"><head> <title>CSS3文本效果</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <p>我是HTML5</p></html>
@charset "utf-8";p{ font-size: 200px; -webkit-text-stroke: 3px red; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: orange; font-family: 黑体; background: -webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);/*搭配*/ -webkit-background-clip: text;/*搭配*/ -webkit-text-fill-color: transparent;/*填充为透明*/}
测试结果:
阅读全文
0 0
- 【HTML5学习笔记】28:CSS3文本效果
- 【HTML5学习笔记】29:CSS3渐变效果
- 【HTML5学习笔记】33:CSS3过渡效果
- 【HTML5学习笔记】34:CSS3动画效果
- HTML5+CSS3学习笔记
- html5+css3学习笔记
- HTML5/CSS3学习笔记
- html5+css3学习笔记
- html5+css3学习笔记
- 【HTML5学习笔记】30:CSS3边框图片效果
- 【HTML5学习笔记】31:CSS3变形效果 上
- 【HTML5学习笔记】32:CSS3变形效果 下
- 【HTML5+css3】学习笔记之html5介绍
- CSS3 (四) 文本效果
- css3文本效果
- CSS3文本效果 、字体
- css3文本效果
- CSS3 文本效果
- Codeforces 842C
- 【半年总结】——化繁为简
- Linux下安装Mysql(yum指令)
- Python实现设计模式--07.原型模式(Prototype Pattern)
- CSS总结——2
- 【HTML5学习笔记】28:CSS3文本效果
- js获取本月开始时间和结束时间
- zoj2318 getout(计算几何)
- HTTP协议下GET与POST的区别
- Leetcode 287. Find the Duplicate Number
- 分布式数据库架构及企业实践--基于Mycat中间件pdf
- MySQL袖珍参考手册(第2版)pdf
- XML入门指南pdf
- XML原理及应用pdf