• 技术文章 >web前端 >css教程

    css圆角边框代码怎么写?(代码示例)

    藏色散人藏色散人2018-08-13 16:52:51原创2671
    本篇文章主要给大家介绍css边框效果怎么实现的。

    css圆角边框代码具体示例如下:

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <title>css圆角边框代码实例</title>
        <meta charset="UTF-8">
        <style type="text/css">
            div
     {
                color: white;
                text-align:center;
                border:2px solid #a1a1a1;
                padding:10px 40px;
                background: #029789;
                width:350px;
                border-radius:25px;
                -moz-border-radius:25px; /* 老的 Firefox */
     }
        </style>
    </head>
    <body>
    
    <div>css边框设置使用border-radius 属性即可向元素添加圆角。</div>
    </body>
    </html>

    效果如下图:

    18eea850cc382b7f674bce311f55cd9.png

    这里涉及主要的属性就是border-radius,利用此属性可进行css圆角边框调节的功能。

    注:border-radius的使用方法:

    border-radius: 1-4 length|% / 1-4 length|%;

    按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

    -webkit-border-radius 是为了兼容 chrome 或 safari。

    -moz-border-radius 是为了兼容火狐。

    以上就是关于css圆角边框代码的具体介绍,希望对有需要的朋友有所帮助。

    以上就是css圆角边框代码怎么写?(代码示例)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css圆角边框代码
    上一篇:css实现3d动画特效的代码实例 下一篇:CSS中常用样式的总结以及css中常用的属性总结
    Web大前端开发直播班

    相关文章推荐

    • 快看!10个不错的CSS实用小技巧(分享)• 【吐血总结】20+个前端实用工具,快放入收藏夹!• CSS如何进行性能优化?优化小技巧分享• css3怎样实现不是直角的菱形效果• 如何利用CSS来美化滑动输入条?自定义样式方法浅析
    1/1

    PHP中文网