鼠标悬停加边框css

基础概念

鼠标悬停加边框（Hover Border）是一种常见的网页交互效果，当用户将鼠标悬停在某个元素上时，该元素的边框会发生变化，通常是为了突出显示该元素。

类型

简单边框变化：仅改变边框的颜色或宽度。
复杂边框变化：可以结合渐变、阴影等效果，使边框变化更加丰富。

应用场景

按钮：当用户悬停在按钮上时，边框颜色变化，提示用户可以点击。
图片或容器：当用户悬停在图片或容器上时，边框出现或变化，突出显示该区域。
链接：当用户悬停在链接上时，边框变化，提示用户可以点击。

示例代码

以下是一个简单的CSS示例，展示如何在鼠标悬停时给一个按钮添加边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Border Example</title>
    <style>
        .hover-border {
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #007bff;
            border: 2px solid transparent;
            border-radius: 5px;
            transition: border-color 0.3s ease;
        }

        .hover-border:hover {
            border-color: #ff6347;
        }
    </style>
</head>
<body>
    <button class="hover-border">Hover Me</button>
</body>
</html>