CSS 3入门(2)
作者:dudo 来源:dudo博客 发布时间:2009-04-19 13:00:00
边框
在CCS 3中边框也有了不同凡响的新功能,比如可以支持层次化等。在Firefox中运行下面的代码:
#box {
border: 8px solid #000;
-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
width:400px;
}
你将会看到如下效果:
如果你没有使用Firefox 3,下面是演示截图:
本文在写作的时候,Safari和Opera还都不支持上面的语法。
阴影
尽管这已经不是一项新技术,但是现在给文字添加阴影已经十分方便了。早在CSS 2.1中就已经这个规则了,而Safari从它的1.0版本开始就已经开始支持了。可以简单地使用text-shadow属性:
<p style="text-shadow: 2px 2px 2px #000;">My Text</p>
前两个数值,向下2px和向右2px用来控制边距,最后一个数值用来控制阴影的扩展程度。如果你想使阴影出现在文字的上方,只需要把对应的数值设置成负数。下面是一个示例:
If you have Safari 3, Opera 9.5, Firefox 3.1a, Konqueror or iCab this paragraph should have a gray drop-shadow.
Safari中的截图:
在一些浏览器(特别是在Opera和Firefox 3.1a)中甚至还可以支持多重阴影,这就意味着你可以只用CSS制作与Photoshop中别无二致的复杂效果来。
图片特效
这个功能可以让你的设计跃然纸上。不过,目前为止只有WebKit系浏览器支持遮罩效果,但是Firefox和Opera很快也会支持了。这项功能主要是为图片、视频以及其它元素添加透明的遮罩效果。
在Safari中其规则如下:
-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)
你可以在 David Hyatt's (Safari的开发者)的文章中查看更炫的遮罩效果。
其它
随着浏览器对CSS支持的扩大更多更新的显示效果会相继出现。实际上,本文仅仅掀开了CSS 3的神秘面纱。CSS 3中还支持多个背景图片、HSL色彩、盒模型缩放、单元素的多栏布局等等。
除上述属性为,CCS 3还增加了更强大的新的选择器的把持,这就使得现在需要五六行才能的实现的效果在一行CCS 3代码就可以搞定。Roger Johansson在456 Berea St有一篇对CSS 3选择器的详细解释(本人已经将此文翻译成了中文:《详解CSS 3中的属性选择符》)。
猜你喜欢
- 互联网上不计其数的信息本质上都是一个一个的HTML文档组成的,通过链接将它们串联起整个互联网。这就犹如骨肉之于人体一样,只有通过经脉才能将它
- 第一步一般是建立一个关键字替换表 如 id keyword url 等字段第二步是文章显示时把【文章】内容和【关键字替换表】对应的关键字替换
- 上次介绍了Access 导入 MSSQL 2000/2005 数据库工具,不过,在使用这个工具时还是有一些地方需要注意的,我把整个导入过程记
- 前面已经了解了关于PL/SQL编程的基础,本文将结合一个案例来加深对这些知识点的理解。一. 案例介绍 某数据库有两张表,是关于某公司员工资料
- 从PJBlog 2.7开始,验证码的功能就很好很强大了,但是同时也给手工输入带来了不小的麻烦——经常输错。之前我写了一个《自己写的一个PJB
- 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,
- SQL Server中事务日志的作用:持续记录数据库所有的事务和这些事务对数据库所做的修改;一旦数据库出现灾难事件,就需要事务日志来进行近期
- 使用picasa的时候,注意到它首先是显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处——picasa的图片翻页是用javascri
- //********************** index.asp ************************//<
- 完美的渐变透明效果。支持IE,Firefox渐变,自己写的JS框架中用的东西,发出来了。修正完全隐藏时,偶尔不display = "
- 这个可应用于所有浏览器中.<SCRIPT language=javascript>var leave=true; functio
- javascript的分号代表语句的结束符,但由于javascript具有分号自动插入规则,所以它是一个十分容易让人模糊的东西,在一般情况下
- 一). ubuntu下mysql安装布局:/usr/bin  
- 首先请把手放胸前成沉思状:我上了生活,还是被生活上了自己?没想出答案把,恩,可以读下文了。从语义角度讲,同一事物的不同表述可以反映人的主观视
- 如何侦测HTTP表头信息?可用下列办法侦测并显示所有的HTTP HEADERS:<HTML><HEAD><TI
- 记得从ymPrompt2.0的时候自己就遇到过在IE下有时会莫名其妙的提示“无法打开Internet站点 已终止操作”,这样的一个错误很让人
- asp定时生成静态HTML的代码,对于缓解服务器压力有很大帮主,需要的朋友可以参考下。<% '判断是否要生成新的HT
- 当很多人发现在DW4中定义CSS很方便的时候,开始报怨FP2000不能定义CSS,甚至就此抨击FP2000如何的不好。事实上,在FP2000
- 这里列出了javascript 中的document.execCommand() 的各种参数说明:2D-Position 允许通过
- <% '测试读取MySql数据库的内容strconnection="driver={mysql odbc 3.51 dri