• 技术文章 >web前端 >前端问答

    css怎么将边框设置为圆角

    青灯夜游青灯夜游2021-09-14 16:21:33原创213

    在css中,可以利用border-radius属性来将边框设置为圆角,只需要给边框元素添加“border-radius:半径值;”样式,即可同时设置四个圆角的半径,将边框的四个角都设置为圆角。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css设置圆角边框最常用也是最简单的方法就是利用border-radius属性。

    CSS圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

    border-radius可以同时设置1到4个值:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div{
    text-align:center;
    border:2px solid #a1a1a1;
    padding:80px 40px; 
    background:pink;
    width:150px;
    border-radius:25px;
    -moz-border-radius:25px; /* 老的 Firefox */
    }
    </style>
    </head>
    <body>
    <div>圆角边框</div>
    </body>
    </html>

    效果图:

    1.png

    border-radius还可以用斜杠设置第二组值。第一组值表示水平半径,第二组值表示垂直半径。第二组值也可以同时设置1到4个值,应用规则与第一组值相同。

    相关推荐:《css视频教程

    以上就是css怎么将边框设置为圆角的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:css注释有几种 下一篇:css文件更改之后不生效怎么办
    大前端线上培训班

    相关文章推荐

    • css如何设置行内间隔• css如何让字改变透明度• css隐藏元素的方式有哪些• css中如何设置元素宽度• 怎么设置不同分辨率的css样式

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网