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

    css怎样在按钮点击时修改边框

    长期闲置长期闲置2021-12-10 14:55:01原创612

    在css中,可以利用“:active”选择器和border属性实现按钮点击时修改边框效果,语法为“按钮元素:active{border:边框粗细值 solid 颜色值}”。

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

    css怎样在按钮点击时修改边框

    在css中,可以用:active选择器和border属性实现按钮点击时修改边框。

    :active选择器用于选择元素被点击时,并设置样式,border属性用于设置元素的边框样式。

    示例如下:

    <!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>
        <style>
            button{
                width:100px;
                height:50px;
                border-radius:25px;
                border:5px solid red;
            }
            button:active{
              border:5px solid pink;
            }
        </style>
    </head>
    <body>
        <button>按钮</button>
    </body>
    </html>

    输出结果:

    +4.gif

    (学习视频分享:css视频教程

    以上就是css怎样在按钮点击时修改边框的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css3怎样设置环形圆 下一篇:在css中top是什么意思
    千万级数据并发解决方案

    相关文章推荐

    • 在css文件中字体加粗属性为什么• css3动画用什么定制规则• 定义自定义字体需要css的什么规则• css3怎么设置背景灰色且透明度• css3怎样设置环形圆
    1/1

    PHP中文网