CSS3属性使网站设计增强同时不消弱可用性

作者佚名技术来源 CSS技术浏览发布时间 2012-03-02

css3-教程

3.文字阴影

目前支持的浏览器:Apple Safari 3+, Firefox 3.0.5+, Google Chrome 1+

为文本添加阴影效果，控制阴影左/右和上/下的偏移，还可以设置阴影的颜色。

1	text-shadow: x y blur color;

你可以结合透明颜色值来设置文字阴影的明暗:

1	text-shadow: -2px 2px 10px rgba(0,0,0,.5);

你还可以让文字有多个阴影，每个阴影属性使用逗号分隔:

1 2	text-shadow: 0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 15px -4px 3px rgba(255,0,0,.75);

css3-实例

4.盒阴影

目前支持的浏览器:Apple Safari 4+, Firefox 3+, Google Chrome 1+

为某个和元素添加阴影的CSS3属性声明格式与文本阴影相同:

1	box-shadow: x y blur color;

和文本阴影一样，Mozilla 和 Webkit 也有他们自己的盒阴影规则:

1
2
3

-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);

你也可以为某个盒元素添加多个阴影，仍然是使用逗号分隔。

1
2
3
4
5
6

-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),
15px -20px 20px rgba(255,0,0,.75);

css3-实例教程

5.多背景图

目前支持的浏览器:Apple Safari 1.3+, Google Chrome 1+

为某个单一元素添加多个背景图的话仅需要为不同的背景图声明之间添加都好来分隔开。当然，你还要为其它浏览器准备一张完整的图片。

1
2
3
4
5

background-image: url(astro-127531.png);
background-image: url(astro-127531.png),url(Hubble-112993.png);
background-repeat: no-repeat;
background-position: bottom left;
background-position: bottom left, top right;

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 14款免费的RSS、CSS和HTML验证工具下一篇: CSS3.0参考手册下载（Webjx推荐）

关于CSS3属性使网站设计增强同时不消弱可用性的所有评论

随机推荐