快速业务通道

CSS3的优势以及网页设计师如何使用CSS3技术

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

在这里,(100% 2em) 是background-size 的值;第一个背景图片将会出现在左上角并会被拉伸至该div的100%宽度和2em的高度。

因为只有少数的浏览器支持它,又因为在网站上不显示背景有损网站的视觉效果,所以,这并不是一个被广泛应用了的属性。尽管如此,它显然能够大大地提高设计师的工作流并显著减少标签数量——相对于用其它方式实现同样的效果。

浏览器支持: 目前,多背景图片只在Safari/chrome 和Konqueror中有效

扩展阅读:

  • Layering multiple background images
  • Multiple backgrounds with CSS3 and CSS3.info
  • Introduction to CSS3, Part 6: Backgrounds

5. Word Wrap

word-wrap 属性用来防止太长的字符串溢出的。可以用两个属性值normal 和break-word。normal 值(默认的) 只在允许的断点截断文字,如连字符。如果使用了break-word ,文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。

css3-word-wrap
WordPress 后台在数据表中使用了word-wrap.

WordPress 的控制面板中,word-wrap 属性被用于表格中的元素;比如在日志和页面的列表中:

1
2
3
.widefat * {
    word-wrap: break-word;
    }

浏览器支持: word-wrap 被Internet Explorer 和Safari/chrome支持。Firefox 将在3.5版本中支持它。

扩展阅读:

  • Force Wrapping: the ‘word-wrap’ property — CSS Text Level 3: W3C Wo***ng Draft
  • word-wrap: CSS3.info
  • CSS word-wrap
  • word-wrap: Mozilla Developer Center

6. 文字阴影

尽管在CSS2中就已经存在,text-shadow是一个未被广泛应用的CSS属性。但是它将在CSS3中被广泛采用。这个属性给设计师一个新的跨浏览器的工具来为设计添加一个维度以使文字醒目。

尽管这样,你需要确认,你的设计中的文字是可读的,以防用户的浏览器不支持CSS3高级属性。给文字和背景色彩足够的对比度以防text-shadow 属性不能被浏览器正确渲染或理解。

css3-文字阴影
Beakapp 在它的网站中使用了text-shadow 属性:内容区域.

BeakApp.com 为内容区域使用了text-shadow 属性,为文字添加深度和维度 并让它变得醒目——而不是使用某种图片替换技术。该属性目前只在Safari和Chrome中可用。

该网站的主菜单使用的CSS如下:

1
2
3
.signup_area p {
    text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

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

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号