您当前所在位置： >
> Web后端开发
CSS3设置文字倒影效果的技巧
大家知道CSS3设置文字倒影效果吗?下面我们就给大家详细介绍一下吧!我们积累了一些经验，在此拿出来与大家分享下，请大家互相指正。
默认值：none
适用于：所有元素
继承性：无
none：无倒影
　Demo: 简单图片倒影 See with Webkit
above：指定倒影在对象的上边
below：指定倒影在对象的下边
left：指定倒影在对象的左边
right：指定倒影在对象的右边
　Demo: 图片与倒影间隔 See with Webkit
：用长度值来定义倒影与对象之间的间隔。可以为负值
：用百分比来定义倒影与对象之间的间隔。可以为负值
　Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit
none：无遮罩图像
：使用绝对或相对地址指定遮罩图像。
：使用线性渐变创建遮罩图像。
：使用径向(放射性)渐变创建遮罩图像。
：使用重复的线性渐变创建背遮罩像。
：使用重复的径向(放射性)渐变创建遮罩图像。
相信大家已经学会CSS3设置文字倒影效果了吧!感谢大家对我们网站的支持!
相关推荐：
上一篇：下一篇：
本文相关阅读
高校查询分数线
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
地区批次线查询
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
科目理科文科综合其他
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
院校所在地北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
其它中央部委
类型工科农业师范民族
层次本科高职(专科)
高考志愿③部曲
频道热门推荐
栏目最新更新我在西安的前端培训班学习了2个多月，学习了html css JavaScript jQuery。老师讲的很认真，也讲的很有水平，我上课也认真听讲，下课了也去实际练习。我也会把老师讲过的例子照着练习。但是一到自己亲自实际去模仿一个网站做自己项目的时候，我就彻底蒙圈了。发现js jq都不会用了。除了css html的布局还没忘记。再过一个来月，我就毕业了，就面临着找工作的事情。以我现在的水平去哪家公司，会不会就把哪家公司搞死了！
首先，你要明确两点：
第一，任何情况下都要无条件的自信。
现在其实通过培训班进入IT行业的人很多很多，培训班也很多很多。可能这个月很多企业还紧缺前端人才，到了下个月就会有一大批前端求职者从培训班涌出，而这些人中实际操作技能和经验能够达到企业用人要求的又极其之少。所以很多企业对培训班学员的印象是不好的。（不要觉得我是在贬低培训班，我只是叙述一个平时从面试官们这看到的实际情况，每次看到是培训出来的学生，基本就没什么兴趣了）而这个时候，还连你自己都不相信自己，请问，你还能拿什么来让别人相信你。无须怀疑自己，你需要做的就是不断充实自己，不断强大自己，积累足够的资本来配得上自己的这份自信。
第二，你无需担心会把哪家公司搞死。
首先，如果你能通过面试进入一家企业，那就说明你的水平足以应付他们公司的工作需求。其次，企业用人都是从试用期开始的，这也就意味着企业给你预留了一定的犯错空间，只要你不违反公司的规章制度，不乱来，哪怕是代码出了事故，这也是企业管理的问题。
然后来说说我的前端学习之路吧，其实前端开发上手并不难，多在于工作中的积累。我是从一个月前开始真正接触前端的，然后接手了一个官网，虽说做的不是什么特别好，但其中还是收获很多的，而且也有些感受可以分享一下。
一个月前，我以一个完全没有接触过前端的小白身份进入一家创业公司实习。来到这，我才开始学习基础知识。老大给我推荐了几本书，《精通CSS+DIV网页样式与布局》傻瓜式入门教程，《精通CSS：高级web标准解决方案》以及《锋利的jQuery》，第一个星期，自己刷基础，试着照着几个页面自己写。由于某些原因，来到之后的第二个星期便被安排负责一个网站项目的开发。毋庸置疑，对于一个刚看了一个星期基础的小白来说，绝对是懵逼的！对于一个毫无工作经验的新手来说，我也是想拒绝的！但最后，还是在同事的帮助下把这网站一点点做了下来。这时才会发现，其实，在项目实践中获得的成长一定远远比你单纯学习理论知识得到的要多、要扎实，这也是大家都公认的一个道理。就像“书读百遍，其义自见”，用得多了，理解也就透彻了。从最开始完全不会，到不断地写静态页面，熟悉各类标签；到对照效果图反复调试CSS，熟悉排版；到用js一个一个去实现效果，熟悉js各类方法；到开始使用jade、less、bootstrap等高端的东西，与后台对接不再只是个静态页面，开始提升；再到网页的基本问题都能解决了，开始考虑性能、响应式移动端适配等问题。这是一个渐进的过程，如果说上来就直接让我使用jade，我根本无法领会到模板引擎中代码复用的意义。一个坑一个坑走过来，至少，现在要我做一个网站，我敢说有很多坑我都不会再踩，比如网页性能、css和js冲突，我敢说大部分效果我都知道该怎样去实现或上哪去找。
前端，相对于其它开发来说还是要有趣很多的。与后台整天同逻辑打交道来说，前端所做的大部分工作，都能立马查看效果，比如修改一个div的样式，再比如用js构建一个动画效果。但是前端的水又很深，上手虽然容易，但如果你想把它玩得很好，你得不断不断地学习。结合这一个月的经历，从个人的体会来说，有以下几点建议：1.时时鞭策自己，保证自己的学习效率。
不管是在学习还是在工作中，紧凑的节奏经常会让人忙得忘了自己在干什么，也忘了要去学习。而IT行业是一个超高速发展的行业，要想跟得上技术更新的速度，我们就得多想、多总结自己的经验和经历。就说说我们老大吧，30+了每天都还坚持看一两个小时的书，学学新技术。买一本书，便规定自己一个星期内要把这本书刷完。ps：当你回过头来看自己一两个月前写的代码，觉得写得很烂的话，那就说明你有在进步。2.眼界不要太低，要往高逼格看齐
一定不要觉得现在接触的这些东西，或是你待的公司所开发项目里用到的技术，你玩得转就可以了，得往高出看，多去了解，然后往这个领域的巅峰看，这样你才能知道自己有多大的不足。3.写微博
对于企业来说，他们最关心面试者会些什么、做过些什么，你学的东西、你做的东西都会增加你简历的份量。你可以从现在开始，尽量多地去认识前端开发中的技术，及时做学习笔记，并更新到自己的微博。一段时间以后，你能看到你自己的积累，去面试的时候也可以给面试官看到一整页一整页的笔记，这都是你学到的东西。（当然，笔记质量一定要高一点，这对自己也是好的）4.在github等平台贡献开源项目
github作为一个代码托管平台，能够在上面看见很多质量高的开源项目，平时可以多关注下这些先进技术，甚至是跟进、贡献项目，如果能参与一两个有名的开源项目，那也绝对也能给你的简历添上浓重的一笔。另外，github还有很好的一点是，能够查看你的代码提交量。如果打开你的github账号，显示的是一排排的深绿色，那也是相当悦目的。5.同理，如果你能自己做出些项目、建些网站，或是能在Runjs等平台上展示些优秀的代码，都无疑会是你面试的资本。以上均出于个人观点，仅供参考。
已被提问者采纳
你还没有登录，请先登录或注册慕课网帐号
骗进来了吧 哈哈哈哈
原谅我，学的时候是在太无聊...
小白我是金融专业毕业后转前端滴，我就贴我隔壁写的一段话过来吧。。
我是怎么成为一个程序员的~
小白我金融专业上年毕业，6月中旬才了解编程，感觉编程挺好玩的。然后开始 用这个慕课网的平台 你可以看看我的学习时间。 尤其是在用PHP建造电商平台这节课上我花的时间最多。现在我是一个前端 工资+提成+奖金 有5k+的菜鸟
哈哈哈。那我从0基础到入职用了多长时间来学习呢。每天5小时视频学习+3小时编程学习学了三个月。
然后用XAMPPS 来建商城网站 和 一个像社交网络电影里面的投票网站。html+ mysql + PHP（框架用THINKPHP）。两个自己给自己的项目 总共用了2个月的时间完成。上一年12月的时候把这两个网站作为demo 找了间公司实习三个月，今年二月份转正了 ~。万事开头难，坚持就是胜利。你不知道学什么，慕课网不是给了你计划吗~我是点了前端 和 后端 。 语言是JS 与 PHP ， 里面有个电商的课程，你能单独完成其实就是把前端与后端的交互都了解了然后自己再弄一个demo 和 个人简历的网站（做的酷炫一点哦 什么CSS3 幻灯片都用上，建议是自己写 不要用网上插件，慕课网好像提供了一个旋转木马的课程与CSS3课程
你可以看看），上面我说的 就是将学到的应用起来。然后你就算一个前端小菜鸟啦 恭喜恭喜。接着找工作， 那时候小白用了一个月的时间来完成 百度啊 京东啊等等前端笔试 10题一天 要了解透彻原理 以及 拉勾网上的公司提出的应聘者要求，然后就像完成成就那样一个个完成~~最后我就面试了两间就找到工作了完结撒花，总结就是：看慕课对应课程，完成大公司面试题目，看小公司的面试要求。
你还没有登录，请先登录或注册慕课网帐号
感谢慕课网，成功入职。
我在慕课网学了3,4个月就去找工作，面试后老大觉得我学习能力不错，虽然现在会的不多但可以培养，所以要态度摆端正。现在觉得生疏，等事情做多了就熟悉了。前端上手快，3月入门，一年初级，勤勤恳恳坚持3年该有的都会有，程序员真是你付出多少就有会收获多少。
你还没有登录，请先登录或注册慕课网帐号
少女，没有什么人事值得你熬夜
你要尝试自己写一些代码，学会分析，明白为什么要这么写，怎么写最好，进公司都会给你学习的时间的，只要基础扎实了，又肯努力一定可以的，加油！
你还没有登录，请先登录或注册慕课网帐号
钱Duang，供橙尸！
不会。首先学过之后就可以做事了，但速度、性能、灵活性都比不上有经验的。所以进公司不只是做公司的任务而已，还得加深自己的基础知识。有可能那家公司需要的技术不多，但不限制你去学别的技术，所谓技多不压身啊。
你还没有登录，请先登录或注册慕课网帐号
这位童鞋很懒，什么也没有留下～～！
没事，有很多公司对应届生开发水平没啥要求，人家主要看重你的潜力
你还没有登录，请先登录或注册慕课网帐号
迷途小前端～
回答之前，说一下，我之前也是经过培训的，大四一年断续上培训课，后来去杭州找的工作。当时刚刚培训完跟题主情况差不多吧，自己手写的情况下，基本连个tab切换都不会，所以刚刚入职之后有点吃力，经常自己加班。为什么听课认真又练习还是不能掌握，只能说知识并不是这样经过短期培训就能完全掌控的，只有在不断的学习，不断的积累，不断的总结，不断的摸索等等一些列时间之后才行，所以题主不要着急，每天都去积累就好了。也别怕把一家公司搞死，因为估计你现在还没有那个能力。
你还没有登录，请先登录或注册慕课网帐号
'老师讲的很认真，也讲的很有水平'面试的时候千万别这么去说。。。这行业，都混不下去，得去当培训老师的，不是能力就是态度有问题。。。你这个属于太缺乏软件行业整体知识了，所以偏编码方面的不行，不过撸码这玩意儿，无论学习还是生产，对态度的要求绝对比对智商要求高，多学多动手，一段时间总结并系统学习一下，提升很快的态度最重要，至少对我来说，一个新人不会我不会觉得奇怪，不会还不肯学，一心就想着用自己掌握的那点皮毛来解决所有问题的人，能多快开了就多快开了
你还没有登录，请先登录或注册慕课网帐号
前端小菜鸟
趁着还有时间多练练吧，先做小的项目，慢慢的就掌握了，找到工作后，在实际开发中的你的水平会有一个明显的提升，总之入职之后刚开始的那一段很重要。
你还没有登录，请先登录或注册慕课网帐号
我在学PHP 也是三个月。还有不到一个月就毕业了。现在也在学JavaScript和JQuery。。。啊真是的。。几天一门课。
你还没有登录，请先登录或注册慕课网帐号
这位童鞋很懒，什么也没有留下～～！
时间太短了，0基础培训三个月，不能奢望能学多好
你还没有登录，请先登录或注册慕课网帐号
两个比喻来解释你的问题。老师教你的是怎么使用筷子，要夹什么菜得看你自己。你会用筷子，而不去夹菜，那是你的问题，具体什么问题，你要去分析。 记住一句话，事出必有因。 你看到了结果，就去推一下原因。我能做的就是帮你尽量锁定原因的范围。2.老师传授你的知识，就是相当于给你的一个坚固的桶，你有了这个坚固的桶你装水才能不漏。你有没有想过，是你自己桶没有建好，和竹篮一样，这样装水能不漏吗?
你还没有登录，请先登录或注册慕课网帐号
还是要多练习。编程就是这样，听是一回事，实际做是另一回事
你还没有登录，请先登录或注册慕课网帐号
做自己喜欢做的事
找一个做网站的是实战例子，先看着跟一遍，然后不看自己做一遍，如果做不出来的话就在看一遍，直到自己不看能做出来。这样比你学很多个例子，但是哪个都没记住，效果要好很多
你还没有登录，请先登录或注册慕课网帐号
多去练习多去事件你这种情况在我刚开始学习php的时候也是遇到遇到过得，我当时是一写代码的时候就懵圈了，然后就对着一段代码写了删，删了重新写，写了再删除，还有就是做笔记，在我学习的过程中我发现笔记的作用是非常大的它可以让你快速的检索自己需要的东西，再往下就是大量的写代码了，首先就是对盒子模型的理解，还有就是对css的理解，如果一个样式自己不会写的话那么去找网山相应的样式利用开发者工具去查看它的样式哪怕是去抄一遍也没有关系最重要的就是一定要自己动手写，当你对键盘熟悉的时候你就再也出现你说的问题了，所谓的键盘熟悉就是对应的肌肉记忆！
你还没有登录，请先登录或注册慕课网帐号
废话多回复见附件
你还没有登录，请先登录或注册慕课网帐号
怎么会不会用，基础的小例子多做几遍。
你还没有登录，请先登录或注册慕课网帐号
加油，少年，
你还没有登录，请先登录或注册慕课网帐号
你还是对学习的知识用得太少了；每个刚开始工作 的人跟你一样的 情况呢；所以不急；慢慢来；去公司多做点东西；一个知识用过几遍才能熟记于心
你还没有登录，请先登录或注册慕课网帐号
差不多啊,都这样,都有这样的情结
你还没有登录，请先登录或注册慕课网帐号
51135人关注
46145人关注
18662人关注
Copyright (C)
All Rights Reserved | 京ICP备 号-2HTML5移动开发学习笔记之CSS3基础学习 - wj704 - 博客园
&在学CSS3之前首先巩固下CSS的基础知识。
1.CSS框模型
&#box { width: 70 margin: 10 padding: 5 }
这个代码将出现的效果是：
2.CSS定位与浮动
&1）定位：
把元素放到一个静态的(static：元素框正常生成)，相对的(relative：元素框偏移某个距离[相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置])，绝对的(absolute：元素框从文档流完全删除，并相对于其包含块定位)，或固定(fixed：元素框的表现类似于absolute,不过其包含块的视窗本身)的位置中
&top,right,bottom,left
定义一个元素的上，右，下，左外边距边界与其包含块上，右，下，左边界之间的距离。注：如果position的属性值为"static"，则不会有任何效果。
设置当元素内容溢出其区域发生的事。overflow: scroll(显示滚动条)|hidden（隐藏）|auto（浏览器自动处理）
设置元素的形状，元素被剪入这个形状之中 rect (top,&right,&bottom,&left)
&vertical-align
设置元素的垂直对齐方式。如：vertical-align:text-把元素的顶端与父元素字体的顶端对齐
&设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(1&0&-1) 注：Z-index 仅能在定位元素上奏效（例如 position:）！
&看下对这些知识点的练习：
1 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
4 &meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
5 &title&无标题文档&/title&
6 &style type="text/css"&
7 h2.pos_left
9 position:relative;
10 left:-20px;
11 top:-20px;
13 h2.pos_right
15 position:relative;
16 left:20px;
17 top:20px;
19 h2.pos_absleft
21 position:absolute;
22 left:<span style="background-color: #f5f5f5; color: #px;
23 top:30px;
24 color:red
26 h2.pos_absright
28 position:absolute;
29 left:-10px;
30 top:90px;
31 color:red
35 position:fixed;
36 left:15px;
37 top:<span style="background-color: #f5f5f5; color: #px;
41 position:fixed;
42 top:30px;
43 right:15px;
47 background-color:#00FFFF;
48 width:<span style="background-color: #f5f5f5; color: #px;
49 height:<span style="background-color: #f5f5f5; color: #px;
50 overflow: auto
52 &/style&
53 &/head&
56 &p&1.绝对定位和相对定位的区别：
58 &h2&这是正常位置&/h2&
59 &h2 class="pos_left"&相对定位1&/h2&
60 &h2 class="pos_right"&相对定位2&/h2&
61 &h2 class="pos_absleft"&绝对定位的移动1&/h2&
62 &h2 class="pos_absright"&绝对定位的移动2&/h2&
63 &/body&
65 &p&2.固定定位：
67 &h2 class="one"&固定定位测试1。&/h2&
68 &h2 class="two"&固定定位测试2。&/h2&
69 &p&&&/p&
71 &p&3.overflow的使用：overflow: scroll(显示滚动条)|hidden（隐藏）|auto（浏览器自动处理）
73 &div id="over"&
74 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
76 &/html&
&W3School上讲解的浮动较简单，不过也有些不太好理解。借鉴http://www.jb51.net/css/67471.html 这篇文章，对浮动有了点理解。
& 浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（&高度塌陷&现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。&正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
我们先来看下高度塌陷的现象：
&style type="text/css"&
background-color: gray;
border: solid 1px black;
.news img {
float: left;
float: right;
&p&①因为浮动表现出高度为0（高度塌陷）的现象：
&div class="news" width="50px"&
&img src="XiaoKeAi.jpg" /&
&p&这是文本&/p&
&p&这是文本&/p&
&p&这是文本&/p&
然后看下清理浮动的方法：
&①添加额外标签的效果：
&style type="text/css"&
clear: both;
&p&①添加额外标签消除高度塌陷的现象：
&div class="news" width="50px"&
&img src="XiaoKeAi.jpg" /&
&p&这是文本&/p&
&p&这是文本&/p&
&p&这是文本&/p&
&div class="clear"&&/div&
&②使用 br标签和其自身的 html属性 (这个方法有些小众，br 有 clear=&all | left | right | none& 属性) 【效果如上述方法一样，亲测通过】
&p&②使用br标签和其自身的 html属性消除高度塌陷的现象：
&div class="news" width="50px"&
&img src="XiaoKeAi.jpg" /&
&p&这是文本&/p&
&p&这是文本&/p&
&p&这是文本&/p&
&br clear="all" /&
&/div&&/body&
③父元素设置 overflow：hidden
&通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1(试了下，这里可以不需要的)；【效果如上述方法一样，亲测通过】
&p&③父元素设置 overflow：hidden 消除高度塌陷的现象：
&div class="news" width="50px" style="overflow:*zoom:1;" &
&img src="XiaoKeAi.jpg" /&
&p&这是文本&/p&
&p&这是文本&/p&
&p&这是文本&/p&
④父元素设置 overflow：auto 属性
将上述的style="overflow:" 这行代码改为style="overflow:"
⑤父元素也设置浮动
效果有点不一样：
代码只在这里变动了：
background-color:
border: solid 1
⑥父元素设置display:table
效果跟上述⑤是一样一样滴~~
代码只在这里变动了：
background-color:
border: solid 1
⑦使用:after伪元素【注：after是伪元素，不是伪类】（听说这种方法是最好滴~~）
效果跟方法①是一样的~
增加了这个代码：
.news:after {content:"."; display: height:0; visibility: clear: }
3.CSS选择器
&元素选择器，选择器分组，类选择器，ID选择器，属性选择器，后代选择器，子元素选择器，相邻兄弟选择器这些知识点已经在W3School回顾温习了下，不记录了。主要学习下CSS 伪类，CSS伪元素。
&1）CSS伪类
& ①锚伪类
a:link {color: #FF0000}
/* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
&注：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。
&②:focus伪类&
&向拥有键盘输入焦点的元素添加样式。
&③:first-child伪类
&& :first-child 伪类来选择元素的第一个子元素，特定伪类很容易遭到误解，最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素（我就是这样错误的认为( ╯□╰ )） 实际上却是选择器匹配作为任何元素的第一个子元素的 p 元素。
&④:lang伪类
&:lang 伪类使你有能力为不同的语言定义特殊的规则。
综合练习下： 效果如下
2 &meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
4 &style type="text/css"&
5 a:link {color: #FF0000}
6 a:visited {color: #00FF00}
7 a:hover {color: #FF00FF}
8 a:active {color: #0000FF}
9 input:focus
11 background-color:yellow;
13 p & i:first-child {
font-weight:bold;
q:lang(no)
quotes: "~" "~"
20 &/style&
21 &/head&
24 &p&1.锚伪类的应用：&br /&
25 &b&&a href="/index.html" target="_blank"&这是一个链接。&/a&&/b&
27 &p&2.focus伪类的应用：&br /&
28 First name: &input type="text" name="fname" /&
30 &p&3.first-child伪类的应用：&br /&
31 &p&some &i&text&/i&. some &i&text&/i&.&/p&
32 &p&some &i&text&/i&. some &i&text&/i&.&/p&
34 &p&4. lang 伪类的应用：&br /&
35 &p&文字&q lang="no"&段落中的引用的文字&/q&文字&/p&
37 &/body&
38 &/html&
2）CSS伪元素
&①:first-line 伪元素
&& "first-line" 伪元素用于向文本的首行设置特殊样式。"first-line" 伪元素只能用于块级元素。
&②:first-letter 伪元素
&& "first-letter" 伪元素用于向文本的首字母设置特殊样式。
&③:before 伪元素
&& ":before" 伪元素可以在元素的内容前面插入新内容。
&④:after 伪元素
&& ":after" 伪元素可以在元素的内容之后插入新内容。
综合练习下：效果如下
2 &meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
4 &style type="text/css"&
5 p:first-line
7 color: #ff0000;
8 font-variant: small-caps
10 h5:first-letter
12 color: #ff0000;
13 font-size:xx-large
15 h3:before
17 content:"台词：";
19 h4:after
21 content:"- 台词";
23 &/style&
24 &/head&
27 1.first-line 伪元素的应用：&br /&
29 You can use the :first-line pseudo-element to add a special effect to the first line of a text!
31 2.first-letter 伪元素的应用：&br /&
33 You can use the :first-line pseudo-element to add a special effect to the first line of a text!
35 3.:before 伪元素的应用：&br /&
36 &h3&我是唐老鸭。&/h3&
37 &h3&我住在 Duckburg。&/h3&
39 4.:after伪元素的应用：&br /&
40 &h4&我是唐老鸭。&/h4&
41 &h4&我住在 Duckburg。&/h4&
42 &/body&
43 &/html&
&小结下：伪类和伪元素有什么区别呢？做的时候就在想。。。又发现好文章一枚 http://m.blog.csdn.net/blog/zhuizhuziwo/7897837
&【伪类：作用对象是整个元素 ；伪元素：作用于元素的一部分】
& CSS3学习
&CSS3完全向后兼容，因此不必改变现有的设计。CSS3被划分为模块，最重要的CSS3模块包括：
& 1）选择器；2）框模型； 3）背景和边框；4）文本效果；5）2D/3D转换；6）动画；7）多列布局；8）用户界面
&下面学习其中的一些模块：
1.背景和边框
&1）CSS3背景
&& CSS3包含多个新的背景属性，下面我们看下这三个属性
background-size
绘制背景图片的尺寸，可以以像素或百分比（相对于父元素的宽度和高度）规定尺寸
background-origin
规定背景图片的定位区域，可以放置于 content-box、padding-box 或 border-box 区域（这些区域的分布见附图1）
background-clip
规定背景的绘制区域，语法：background-clip: border-box|padding-box|content-
&2）CSS3边框
&& 通过 CSS3能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框。学习下实现这些效果的这三个属性
border-image
设置所有border-image-*属性的简写属性，看了W3school的介绍觉得有些还没弄懂，再认真看了http://www.jb51.net/css/27855.html和http://www.jb51.net/css/38358.html这两篇文章。
border-radius
&设置所有四个 border-*-radius 属性的简写属性。
border-shadow
向方框添加一个或多个阴影，语法box-shadow: h-shadow v-shadow blur spread color inset；说明：h-shadow 水平阴影的位置，允许负值。v-shadow 垂直阴影的位置，允许负值。blur 模糊距离。spread 阴影的尺寸。color 阴影的颜色。inset 将外部阴影改为内部阴影。
&看个综合的练习：
1 &!DOCTYPE html&
3 &meta charset="utf-8" /&
5 &style type="text/css"&
8 background:url(XiaoKeAi.jpg);
9 background-size:<span style="background-color: #f5f5f5; color: #px 180px;
10 background-repeat:no-repeat;
11 padding-top:<span style="background-color: #f5f5f5; color: #px;
15 border:1px solid black;
16 width:<span style="background-color: #f5f5f5; color: #px;
17 height:<span style="background-color: #f5f5f5; color: #px;
18 padding:50px;
19 background:url(XiaoKeAi.jpg);
20 background-repeat:no-repeat;
21 background-position:left;
22 background-origin:border-box;
26 border:1px solid black;
27 width:<span style="background-color: #f5f5f5; color: #px;
28 height:<span style="background-color: #f5f5f5; color: #px;
29 padding:50px;
30 background:url(XiaoKeAi.jpg);
31 background-repeat:no-repeat;
32 background-position:left;
33 background-origin:content-box;
37 width:<span style="background-color: #f5f5f5; color: #px;
38 height:<span style="background-color: #f5f5f5; color: #px;
39 padding:50px;
40 background-color:yellow;
41 background-clip:border-box;
42 border:2px solid #92b901;
46 width:<span style="background-color: #f5f5f5; color: #px;
47 height:<span style="background-color: #f5f5f5; color: #px;
48 padding:50px;
49 background-color:yellow;
50 background-clip:content-box;
51 border:2px solid #92b901;
55 width:<span style="background-color: #f5f5f5; color: #px;
56 height:<span style="background-color: #f5f5f5; color: #px;
57 background-color:#ff9900;
58 -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
59 box-shadow: 10px 10px 5px #888888;
63 text-align:center;
64 border:2px solid #a1a1a1;
65 padding:10px 40px;
66 background:#dddddd;
67 width:<span style="background-color: #f5f5f5; color: #px;
68 border-radius:25px;
69 -moz-border-radius:25px; /* 老的 Firefox */
73 border:15px solid transparent;
74 width:<span style="background-color: #f5f5f5; color: #px;
75 padding:10px 20px;
76 -moz-border-image:url(border.jpg) 30 30 round;
/* Old Firefox */
77 -webkit-border-image:url(border.jpg) 30 30 round;
/* Safari and Chrome */
78 -o-border-image:url(border.jpg) 30 30 round;
/* Opera */
79 border-image:url(border.jpg) 30 30 round;
83 border:15px solid transparent;
84 width:<span style="background-color: #f5f5f5; color: #px;
85 padding:10px 20px;
86 -moz-border-image:url(border.jpg) 30 30 stretch;
/* Old Firefox */
87 -webkit-border-image:url(border.jpg) 30 30 stretch;
/* Safari and Chrome */
88 -o-border-image:url(border.jpg) 30 30 stretch;
/* Opera */
89 border-image:url(border.jpg) 30 30 stretch;
91 &/style&
92 &/head&
94 &table&
95 &tr width="500px"&
96 &th width="250px"&
97 &p&1，看下background-size的效果:&/p&
98 &div id=div1&拉伸的背景图片&/div&
100 &th width="250px"&
101 &p&&&/p&
102 &div id=div2&原始图片：&img src="XiaoKeAi.jpg" width="200" height="200" alt="小可爱"&&/div&
106 &tr width="500px"&
108 &p&2，看下background-origin的效果：&/p&
109 &p&background-origin:border-box:&/p&
110 &div id="div3"&
111 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
112 &/div&
116 &p&&&/p&
117 &p&background-origin:content-box:&/p&
118 &div id="div4"&
119 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
120 &/div&
125 &tr width="500px"&
127 &p&3，看background-clip的效果：&/p&
128 &p&background-clip:border-box:&/p&
129 &div id="div5"&
130 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
131 &/div&
134 &p&&&/p&
135 &p&background-clip:content-box:&/p&
136 &div id="div6"&
137 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
138 &/div&
141 &tr width="500px"&
143 &p&4，看CSS3边框属性的圆角和阴影效果：&/p&
144 &p&background-clip:border-box:&/p&
145 &div id="div7"&
146 &/div&
149 &p&&&/p&
150 &p&background-clip:content-box:&/p&
151 &div id="div8"&
152 border-radius 属性允许您向元素添加圆角。
153 &/div&
156 &tr width="500px"&
158 &p&5，看CSS3边框图片效果：&/p&
159 &p&图片铺满整个边框:&/p&
160 &div id="div9"& 在这里，图片铺满整个边框。
161 &/div&
164 &p&&&/p&
165 &p&图片被拉伸以填充该区域:&/p&
166 &div id="div10"&
167 在这里，图片被拉伸以填充该区域。
168 &/div&
171 &/body&
172 &/html&
2.文本效果和字体应用
&& 1）文本效果
& 新的文本属性挺多，这里介绍下text-shadow和text-wrap
text-shadow
向文本设置阴影，语法：text-shadow: h-shadow v-shadow blur color;
允许长单词换行到下一行，语法：word-wrap: normal|break- normal 表示只在允许的断字点换行（浏览器保持默认处理）。break-word&在长单词或 URL 地址内部进行换行。
&& 2）CSS3字体
&&& 在CSS3之前，Web设计师必须使用已在用户计算机上安装的字体。通过CSS3，Web设计师可以使用任意字体（将该字体存放到web服务器上，它会在需要时自动下载到用户的计算机上）
&& 介绍下 @font-face 规则中定义的所有字体描述符：
&& ①font-family 规定字体的名称； ② src 定义字体文件的 URL； ③font-stretch 定义如何拉伸字体 ④font-style 定义字体的样式； ⑤font-weight 定义字体的粗细 ；⑥unicode-range 定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。
&看下综合的练习：
1 &!DOCTYPE html&
3 &meta charset="utf-8" /&
8 text-shadow: 5px 5px 5px #FF0000;
12 width:11em;
13 border:4px solid #000000;
15 p.test1
17 width:11em;
18 border:4px solid #000000;
19 word-wrap:break-word;
21 @font-face
23 font-family: myFirstFont;
24 src: url('Sansation_Regular.ttf')
,url('Sansation_Regular.eot'); /* IE9+ */
27 @font-face
29 font-family: myFirstFont;
30 src: url('Sansation_Regular.ttf'); /* IE9+ */
font-weight:bold;
/* 为了使字体变粗，须为粗体文本添加另一个包含描述符的 @font-face：可是为毛我这里没管用，RP问题？ */
35 font-family:myFirstFont;
37 &/style&
38 &/head&
41 &h1&文本阴影效果！&/h1&
42 &p class="test"&没有换行的效果 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.&/p&
43 &p class="test1"&换行的效果 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.&/p&
44 &div id="div1"&
45 字体的应用：
46 With &b&CSS3&/b&, websites can finally use fonts other than the pre-selected "web-safe" fonts. This
48 &p&&b&注释：&/b&Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。&/p&
49 &/body&
50 &/html&
&& 在这一小节中，我们将学到2D转换的几种方法
translate(x,y)
定义 2D 转换，沿着 X 和 Y 轴移动元素。扩展translateX(n)和translateY(n)，意思分别是沿着x,y轴移动元素
scale(x,y)
定义 2D 缩放转换，改变元素的宽度和高度。扩展scaleX(n)，scaleY(n)
rotate(angle)
定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)
定义 2D 倾斜转换，沿着 X 和 Y 轴。扩展skewX(angle)，skewY(angle)
matrix(n,n,n,n,n,n)
定义 2D 转换，使用六个值的矩阵。
&看下综合练习的效果：
1 &!DOCTYPE html&
3 &meta charset="utf-8" /&
8 width:<span style="background-color: #f5f5f5; color: #px;
9 height:<span style="background-color: #f5f5f5; color: #px;
10 background-color:yellow;
11 border:1px solid black;
13 div#div1
15 transform:translate(100px,10px);
18 div#div2
20 /* Rotate div */
21 transform:rotate(30deg);
22 float:left;
24 div#div3
26 margin:<span style="background-color: #f5f5f5; color: #px;/*注意这里的运用，这似乎可以看出基点所在*/
27 transform:scale(2,2);
28 float:left;
30 div#div4
32 transform:skew(10deg,20deg);
33 float:left;
35 div#div5
37 transform:matrix(0.866,0.5,-0.5,0.866,0,0);
38 float:left;
40 &/style&
41 &/head&
43 &div id="div1"&Hello1，我是translate()方法，沿X轴移动100px,Y移动10px&/div&
44 &div id="div2"&Hello2，我是rotate()方法，旋转了30度&/div&
45 &div id="div3"&Hello3，我是scale()方法 把宽度和高度转换为原始尺寸的 2 倍。&/div&
46 &div id="div4"&Hello4，我是skew()方法 围绕 X 轴把元素翻转 10 度，围绕 Y 轴翻转 20 度。&/div&
47 &div id="div5"&Hello5，我是skew()方法，使用六个值的矩阵。&/div&
48 &/body&
49 &/html&
3D转换的方法包含了2D转换的哪些方法，不过加了Z轴。所以转换的效果是不同，3D立体嘛。。。
看下3D转换方法中使用这两个方法 rotateX()；rotateY()的效果：
1 &!DOCTYPE html&
3 &meta charset="utf-8" /&
8 width:<span style="background-color: #f5f5f5; color: #px;
9 height:<span style="background-color: #f5f5f5; color: #px;
10 background-color:yellow;
11 border:1px solid black;
13 div#div1
15 transform:rotateX(120deg);
16 float:left;
18 div#div2
20 transform:rotateY(130deg);
21 float:left;
23 &/style&
24 &/head&
26 &div id="div"&Hello,我是标准。看下其他两种方法旋转的效果&/div&
27 &div id="div1"&Hello1，我是rotateX()方法，围绕X轴旋转120度&/div&
28 &div id="div2"&Hello2，我rotateY()方法，围绕Y轴旋转130度&/div&
29 &/body&
30 &/html&
&CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。这种效果像动画挺好玩的~~【原来就是CSS3中的动画( ╯□╰ )】
请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。
关键代码：
{width:100
transition: width 2s;
可以看出这个transition属性起的作用，学习下它。
语法：transition: property& duration& timing-function& delay;
transition-property
规定应用过渡的 CSS 属性的名称
transition-duration
定义过渡效果花费的时间。默认是 0。
transition-timing-function
规定过渡效果的时间曲线。默认是 "ease"。语法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); 说明下ease的描述，ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（等于cubic-bezier(0.25,0.1,0.25,1)）。
transition-delay
规定过渡效果何时开始。默认是 0。
&&动画是使元素从一种样式逐渐变化为另一种样式的效果。
关键代码：
@keyframes myfirst
0% {background: left:0 top:0}
25% {background: left:50 top:0}
50% {background: left:50 top:50}
75% {background: left:0 top:50}
100% {background: left:0 top:0} } div
background:
animation:myfirst 5s linear 2
&可以看出，首先用@keyframes 规则创建动画，
& 上述的myfirst 规则中 百分比是来规定动画在某个时间段做的事情，0% 是动画的开始，100% 是动画的完成（也可以用关键词"from" 和 "to"，等同于 0% 和 100%。）
&再来看animation属性
&语法：animation: name& duration& timing-function& delay& iteration-count& direction;
animation-name
规定需要绑定到选择器的 keyframe 名称。
animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function
规定动画的速度曲线。默认值：ease（跟上述的过渡是一样的）
animation-delay
规定在动画开始之前的延迟。值以秒或毫秒计。
animation-iteration-count
定义动画的播放次数 infinite 表示无限次
animation-direction
规定是否应该轮流反向播放动画 alternate表示轮流反向播放
& 能够创建多个列来对文本进行布局 - 就像报纸那样！
&主要是这三个属性的应用
& ①column-count& 规定元素应该被分隔的列数。
& ②column-gap 规定列之间的间隔。
& ③设置所有 column-rule-* 属性的简写属性。语法column-rule: column-rule-width column-rule-style column-rule-color;
8.用户界面
在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等.
&& ①resize& 规定是否可由用户调整元素尺寸。 语法：resize: none|both|horizontal| 对应意思为：用户无法调整元素尺寸|可调高度和宽度|可调宽度|可调高度
&& ②box-sizing 确切的方式定义适应某个区域的具体内容& 语法：box-sizing: content-box|border-box|
&& ③outline-offset& 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。语法：outline-offset: length(轮廓与边框边缘的距离)|inherit(从父元素继承 outline-offset 属性的值);
随笔 - 111
评论 - 101