用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text-stroke可以为文字添加边框.它不但可以设置文字边框的宽度,也能设置其颜色.而且,配合使用color: transparent属性,你还可以创建镂空的字体! 语法如下: -webkit-text-stroke:宽度 颜色 接下来,为读者准备了一个实例,为段落元素添加文字描边.若浏览器不支持描边则…

direction定义文字排列方式,所有浏览器都兼容这个属性,有两个可选值rtl和ltr.文字排版的参数说明如表1所示. 表1  CSS3文字排版参数说明 上表所示,ltr是初始值,表示left-to-right,就是从左往右的意思,具体描述就是内联内容从左往右依次排布.我们平时网页的处理都是这样的,比方说前后两个图片,默认情况下,DOM在前的就显示在左边. rtl则是另外一个值,right-to-left缩写,就是从右往左的意思,再具体描述下,就是内联内容是从右往左依次排布的,加入应用了这个C…

文字阴影是可以叠加的.最基本可以给出四个值,用法如下: text-shadow:x y blur color 文字阴影的参数说明如表1所示. 表1  CSS3文字阴影参数说明 横向偏移量和纵向偏移量可以为负值,代表文字阴影向左偏移或向上偏移.文字阴影是可以叠加的,但是加很多层,会影响页面加载速度.添加多层阴影用“,”隔开.阴影叠加是先渲染前面的,再渲染后面的. 1．最简单的用法 text-shadow:2px 2px 4px #000; 此语法说明为一段文字设定横向偏移量为2px,纵向偏移量为2…

本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CSS3增加了弹性盒模型,我们可以为盒模型增加阴影和倒影.CSS3的分栏布局让WEB开发人员轻松的让文本呈现多列显示.传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,仅需要通过设置border-radius属性即可.通过CSS3,我们能够创建圆…

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通过CSS3,我们能够创建动画,可以在许多网页中取代动画图片.flash动画以及JavaScript. 1  关键帧keyframes 如需在CSS3中创建动画,我们需要先学习@keyframes规则.前面所提到transition制作的过渡效果,包括了初始属性和最终属性,一个开始执行动作时间和一个延…

字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计.美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷: Ø 不可能大范围的使用该字体: Ø 图片内容相对使用文字不易修改: Ø 不利于网站SEO(主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素). 网络上有一些使用sIFR技术.或javascript/flash hack的方法,但实现起来或繁琐,或…

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行:人们的视点从文本的一端移到另一端.然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去.所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样.但是在CSS3的多列布局(columns)语法功…

在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections板块,CSS Reflections允许设计倒影,目前,CSS Reflections仅获得webkit引擎的支持,我们只能够在Chrome和Safari浏览器中测试.CSS3的box-reflect属性,使我们可以对图片.文字等进行倒影设计,具体语法: box-reflect: none | <d…

5  3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋转:使用rotateY()函数允许一个元素围绕Y轴旋转:使用rotateZ()函数允许一个元素围绕Z轴旋转: rotateX()函数指定一个元素围绕X轴旋转,旋转的量被定义为指定的角度:如果值为正值,元素围绕X轴顺时针旋转:反之,如果值为负值,元素围绕X轴逆时针旋转.其基本语法如下:  rotate…

3  perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y轴位置,在该位置观看者好像在观看该元素的子元素. perspective-origin属性的使用语法如下: perspective-origin: tx ty; 该属性的默认值为“50%  50%”,可以设置一个值,也可以设置两个长度值.其取值及描述如表3 表3 perspective-origin…