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

    css按钮如何去掉边框

    醉折花枝作酒筹醉折花枝作酒筹2021-04-15 10:12:36原创1404

    在css中,可以使用border属性给按钮去掉边框,只需要给按钮元素设置“border: none;”样式即可。border属性用于给元素设置边框样式,当border的值为none的时候,表示去掉边框,定义无边框样式。

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

    新建一个html文件,命名为test.html,用于讲解css中如何去掉button(按钮)的边框。

    在test.html文件内,使用button标签创建一个按钮,用于测试。

    <button>按钮</button>

    在test.html文件内,给button按钮添加一个id属性,用于样式的设置。

    <button id="button">按钮</button>

    在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。

    在css标签中,通过id设置button的样式,定义其背景颜色为蓝色,文字颜色为白色,最后,将border属性设置为none,实现去掉button的边框。

    #button{
                background: blue;
                color: #fff;
                border: none;
            }

    在浏览器打开test.html文件,查看实现的效果。

    E59QMYMU[~%(Z11WLL2R%{4.png

    推荐学习:css视频教程

    以上就是css按钮如何去掉边框的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 按钮
    上一篇:css如何修改字体为华文行楷 下一篇:使用css实现自适应标题浮动效果(代码实例)
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• css上下间距怎么调• css如何设置边框透明• css如何固定住元素不变• css如何设置表格间距• 如何修改织梦css
    1/1

    PHP中文网