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

    css怎样设置button为直角

    长期闲置长期闲置2021-11-17 17:16:40原创75

    在css中,可以利用“border-radius”属性设置button为直角,只需要给button元素添加“{border-radius:0%;}”或者“{border-radius:0px;}”样式即可。

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

    css设置button为直角的方法

    在css中可以使用border-radius属性来设置元素的圆角边框,border-radius属性的语法为:

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

    其中需要注意的是:

    length用来定义圆角的形状,%用来以百分比定义圆角的形状。

    button元素在默认情况下是有一些圆角的:

    1117.22.png

    想要将button设置为直角,只需要给button元素添加“border-radius:0px;”或者“border-radius:0%;”样式即可。

    示例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
    button{
        border-radius:0%;
        }
    </style>
    <body>
        <button>123</button>
    </body>
    </html>

    或者另一种形式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
    button{
        border-radius:0px;
        }
    </style>
    <body>
        <button>123</button>
    </body>
    </html>

    上述两种方法输出结果是相同的:

    1117.21.png

    更多编程相关知识,请访问:编程视频!!

    以上就是css怎样设置button为直角的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 样式
    上一篇:css文字水平垂直居中怎么设置 下一篇:css怎样设置文字垂直显示
    VIP会员

    相关文章推荐

    • css p什么意思• css加载外部字体 乱码怎么办• jq 怎么修改css属性• css 中加号什么意思• css又称什么• css文字水平垂直居中怎么设置

    全部评论我要评论

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

    PHP中文网