CSS学习案例（9）：荧光边框

最新推荐文章于 2024-08-12 09:41:22 发布

Rengarhunt

最新推荐文章于 2024-08-12 09:41:22 发布

阅读量623

点赞数 1

分类专栏： css 文章标签： css

原文链接：https://www.bilibili.com/video/BV1Qi4y1g7Xk

版权

css 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

这篇博客介绍了jQuery中的click()和dblclick()方法。click()方法在用户点击元素时触发，常用于隐藏元素；dblclick()则在元素双击时激活，适合用于需要双击响应的场景。示例展示了如何应用这些方法到HTML元素上，以实现交互效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<div class="box">
        <h1>jQuery</h1>
        <p>click() 方法是当按钮点击事件被触发时会调用一个函数。
            该函数在用户点击 HTML 元素时执行。
            当点击事件在某个 &lt;p&gt; 元素上触发时，隐藏当前的 &lt;p&gt; 元素:</p>
        <p>dblclick()
            当双击元素时，会发生 dblclick 事件。
            dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：</p>     
</div>

*{margin: 0;padding: 0;}
body{
    width: 100vw;height: 100vh;
    background: #2d3436;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box{
    width: 300px;height: 400px;
    position: relative;
    background: #2d3436;
    color: #fff;
}
h1{
    font-size: 24px;
    text-align: center;
    line-height: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
}
p{
    font-size: 16px;
    word-wrap: break-word;
    text-indent: 2em;
    line-height: 30px;
    padding: 12px;
   
}
.box::before,.box::after{
    content: '';
    background: linear-gradient(to top right,#b92b27,#2d3436,#1565c0);
    top: -2px;left: -2px;right: -2px;bottom: -2px;
    position: absolute;
    z-index: -1;
}
.box::before{
    filter: blur(20px);
}