仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 927|回复: 8
打印 上一主题 下一主题

[DIV+CSS] DIV教程之css3教程:笔墨暗影剖析

[复制链接]
跳转到指定楼层
楼主
发表于 2015-1-15 23:55:26 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?
网页制造poluoluo文章简介:比来我由于要安装Firebug1.4招致我不能不安装了Firefox3.5,以是很不当心地打仗到了Wordpress背景那大度的笔墨暗影.也就是CSS中的text-shadow属性.以是明天我收拾了一些材料,但愿能够对人人有所启示.起首我们看看wordpress2.8背景利用了text-shadow的部分(绿
比来我由于要安装Firebug1.4招致我不能不安装了Firefox3.5,以是很不当心地打仗到了Wordpress背景那大度的笔墨暗影.也就是CSS中的text-shadow属性.以是明天我收拾了一些材料,但愿能够对人人有所启示.
起首我们看看wordpress2.8背景利用了text-shadow的部分(绿色箭头).以为怎样?没错,这些都是CSS3属性,而不是图片做成的.

text-shadow是甚么?
text-shadow早在CSS2中已存在,而如今CSS3也筹办将他到场个中.而且因为一向以来只要Safari撑持这个属性以是我们很少见到真实的使用,直到比来Firefox3.5对它的撑持然从头唤起了人们对它的乐趣.
text-shadow能够撑持给笔墨加上暗影,如许我们在计划时能够使用css3属性增添笔墨的质感而不必利用任何图片.
今朝撑持的扫瞄器有Firefox3.1+,Safari3+,Opera9.5+等古代扫瞄器(数据大概有偏向).固然IE家属是没法撑持的.
接上去看看text-shadow的语法:
text-shadow:colorlengthlengthlength;
color:色彩;length分离按按次指“X轴偏向长度Y轴偏向长度暗影含混半径
正值在X轴暗示向右,负值暗示向左.一样的事理Y轴负值是暗示向上.个中恣意一个值能够为零也可为空(将做默许处置)
举个例子:
text-shadow:-1px2px3px#ffb69a;
暗示X轴偏向暗影向左1px,Y轴偏向暗影向下2px,而暗影含混半径3px,色彩为#ffb69a
一些实验与demo
我做了点小小的实验,做成了一个Demo页面.为了让扫瞄器不撑持text-shadow的用户看到暗影效果,请间接看以下截图(有位伴侣说谁人”火鸟”看起来像”鸡”):


更好的控制页面布局。不用多说。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-16 00:15

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表