快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-02
3: W3C Working Draft
  • CSS3: Attribute selectors: CSS3.info
  • Compatibility table: CSS3 Selectors
  • CSS selectors and pseudo selectors browser compatibility
  • CSS3 Attribute Selectors
  • ::selection
  • General Sibling Selector
  • CSS3 Pseudo-classes
  • 2. RGBA和透明度

    RGBA 让你可以不仅仅设定色彩,还能设定元素的透明度。一些浏览器尚不支持它,所以最好在RGBa前面设定其它浏览器支持的没有透明的颜色属性。

    css3-透明度
    Tim Van Damme在链接的hover效果上使用了RGBA

    在这个网站上,Tim Van Damme在鼠标悬停效果上使用了RGBa;例如,在他的首页的network链接上:

    1
    2
    3
    4
    #networks li a:hover,
    #networks li a:focus {
        background: rgba(164, 173, 183, .15);
        }

    当设定一个RGBA 色彩的时候,我们必须依次设定红、蓝、和绿色的值,可以是0-255或百分数。透明值应该在0.0到1.0之间,例如0.5 代表50% 的透明度。

    RGBA 和opacity 之间的不同是前者只会应用到指定的元素上,而后者会影响我们指定的元素及其子元素。

    这里有个例子展示我们如何给一个div添加80% 透明:

    1
    2
    3
    div {
        opacity: 0.8;
        }

    浏览器支持: RGBA 被Webkit内核浏览器支持。IE所有版本都不支持。Firefox 2也不支持,但是Firefox 3 和Opera 9.5均支持。Opacity 被Opera、Webkit核心 和Gecko核心的浏览器支持。IE所有版本同样不支持。IE只支持自家的该死的滤镜(filter)

    扩展阅读:

    • CSS Color Module Level 3: W3C Working Draft
    • RGBA colors: CSS3.info
    • RGBA color space
    • Is CSS3 RGBa ready to rock?
    • Super-Awesome Buttons with CSS3 and RGBA

    3. 多栏布局

    这是新的CSS3 选择器可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏,让文本实现一个仿报纸的多栏结构。

    css3-多栏布局
    tweetCC 在其首页使用了CSS3 多栏选择器

    tweetCC 在其首页上将介绍文字显示为四栏。这四栏并非浮动的div;相反,设计师使用下面的CSS3 多栏布局:

    1
    2
    3
    4
    5
    6
    .index #content div {
        -webkit-column-count : 4;
        -webkit-column-gap : 20px;
        -moz-column-count : 4;
        -moz-column-gap : 20px;
        }

    凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站: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号