• 3U娱乐城可信吗 2018-07-22
  • “智能之光”照进津门大地——天津加快建设智能科技产业发展新高地 2018-07-22
  • China party system sets an example 2018-07-22
  • 荔枝跨年“全能女王”刘涛登台献唱(组图) 2018-07-22
  • 安徽省十二届人大代表议案建议全部办结 2018-07-22
  • 清明假期还没过,五一火车票已开售,你抢票了没? 2018-07-21
  • 江城元宵细雨 观灯注意安全 2018-07-21
  • 杠杆资本弃壳退场 汇垠系让渡两公司控股权 2018-07-21
  • 12月12日活动爆料丨剁剁剁剁什么手,这次绝不让你吃土! 2018-07-20
  • 美国创新力排名跌出前十 韩国和瑞典蝉联前两名 2018-07-20
  • 讲述真人版“红海行动” 引孙杨现场动容 2018-07-20
  • 太阳城娱乐城网伟易博 2018-07-19
  • 先重组转型后变无主 帝龙文化实控人退位被"翻旧账" 2018-07-19
  • 线下数据大揭秘:南京女孩的钱都花哪儿了? 2018-07-19
  • 寒冷时节 咋防流感教你三招抵御感冒 2018-07-19
  • 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的不同组件是如何协同工作的。接着将学习设置有效的可编译代码副本的步骤,然后使用基本架构添加自己的配置变量和存储引擎。