• Reciprocity key to denuclearization process 2018-10-24
  • 拥有7.2亿美元比特币大金主突然苏醒 数字货币“吓跌” 2018-10-24
  • ::紫光阁::中共中央国家机关工作委员会 2018-10-23
  • 3名中国游客在瑞典遭粗暴对待 外交部敦促瑞方重视中方关切 2018-10-21
  • 国足20-0大胜!女梅西6球,女C罗轰5球,男足才赢19-0 2018-10-21
  • 消协提醒:春节预订酒店有技巧 预付卡消费需谨慎 2018-10-20
  • 陈敏尔唐良智会见传化集团董事长徐冠巨 2018-10-20
  • 扫黑除恶利剑高悬 前8月榕查处违法采砂案件93起 2018-10-20
  • 不能让所谓的收视率愚弄观众 2018-10-18
  • 新希望!中超19岁新星半年增重十斤 曾戏耍恒大两国脚 2018-10-17
  • 迎丰收 晒丰收 庆丰收 2018-10-15
  • “捂脸表情”被注册成商标?申请人不认为商标侵权 2018-10-15
  • 战巡南海、绕岛巡航…空军有“飞出去”的主心骨 2018-10-14
  • 幼儿园要求家长写一万字读后感:不能这样玩家长|幼儿园|家长-教育时讯 2018-10-13
  • 中国故宫文物展在希腊举行 2018-10-13
  • CSS3圆角效果实例

    栏目: 编程语言 发布于: 2014-05-11 15:50:44

    最近看到一个网站使用的圆角效果挺不错的,忙里偷闲今天也研究了一下。下面分享几个使用css3实现的圆角实例。

    使用css3实现圆角效果主要是用到了 border-radius 这个属性,这个是css 3.0中新增的一个属性。这里将 border-radius 的兼容性列举如下;

    浏览器 支持性
    Firefox(2、3+)
    Google Chrome(1.0.154+…)
    Google Chrome(2.0.156+…)
    Safari(3.2.1+ windows)
    Internet Explorer(IE7, IE8) ×
    Opera 9.6 ×

    border-radius 属性的值即圆半径的值。

    因为浏览器引擎的原因,针对 firefox Safari和Chrome 这两种浏览器则有其特殊的写法,即 -moz-border-radius 和 -webkit-border-radius

    -moz-border-radius 用于 Firefox

    -webkit-border-radius 用于 Safari和Chrome

    注意这三种形式的书写需要遵循一定的顺序的,顺序如下:

    #radius {
        -moz-border-radius: 15px;      /* Gecko browsers */
        -webkit-border-radius: 15px;   /* Webkit browsers */
        border-radius:15px;            /* W3C syntax */
    }

    border-radius 也可以像 border 属性那样分开写,即:

    border-top-right-radius
    border-bottom-right-radius
    border-bottom-left-radius
    border-top-left-radius

    那么针对firefox Safari和Chrome 则加上相应的前缀(-moz- -webkit-)就是了。

    下面演示一个简单的通过 css3 实现的圆角效果,首先贴下效果图:

    下面是示例代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.rocksun.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.rocksun.cn/javascript-function/833.html">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css3 圆角效果实例</title>
    <style type="text/css">
    #round {
        padding:10px; width:200px; height:50px;
        border: 5px solid #666;
    	background-color:#CCC;
        -moz-border-radius: 15px;      /* Gecko browsers */
        -webkit-border-radius: 15px;   /* Webkit browsers */
        border-radius:15px;            /* W3C syntax */
    }
    </style>
    </head>
    <body>
    <div id="round">css3 圆角效果实例</div>
    </body>
    </html>

    有牛人用这个实现了一个奥运五环的标志,喜欢的可以看看(注意请在支持 border-radius 属性的浏览器上面看效果):

    css3圆角实现奥运五环标志(效果图如下)

    css3圆角实现奥运五环标志

    您可能感兴趣的文章

    • css3阴影效果实例
    • 网页缓存Js,css以及图片导致页面刷新无效果的三种解决办法
    • 右下角弹出广告 js,漂浮效果(兼容多浏览器)
    • jquery下拉菜单效果(超简洁实用,兼容IE和firefox等主流浏览器)
    • flash幻灯片切换效果代码,超简单超实用
    • CSS透明效果,兼容IE和firefox
    • jquery倒计时效果插件
    • 将百度搜索结果链接转为实际链接
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:CSS3圆角效果实例
    IT技术书籍推荐:
    深入理解MySQL核心技术
    深入理解MySQL核心技术
    Sasba Pacbev (作者), 李芳 (译者), 于红芸 (译者), 邵健 (译者)
    《深入理解MySQL核心技术》:从公共可用性的意义上讲,MySQL源代码是开放源代码,但如果对其不了解,则实质上,它对于您来说是封闭的。MysQL开发团队的前成员Sasha Pachev通过《深入理解MySQL核心技术》给出了MySQL 5的全面指南,揭示了这一强大数据库的内部运作。您将直奔MySQL核心技术,了解各种数据结构和各种方便的功能的运作情况,了解如何添加新的存储引擎和配置选项等。 《深入理解MySQL核心技术》从结构概况讲起,在这一部分解释了MysQL的不同组件是如何协同工作的。接着将学习设置有效的可编译代码副本的步骤,然后使用基本架构添加自己的配置变量和存储引擎。