css的outline属性-dxWebSite杜鑫个人网站-php_前端

05 08月 2024

在 CSS 中，outline 属性用于在元素周围绘制一条线，它不会影响到元素的布局，也不会影响到其他元素的位置。outline 属性通常用于突出显示元素，比如当元素获得焦点时。

outline 属性的组成部分

outline 是一个复合属性，可以在一个声明中设置所有的轮廓属性。其顺序是：

outline-color: 轮廓的颜色。

outline-style: 轮廓的样式。

outline-width: 轮廓的宽度。

示例代码

下面是一个简单的示例，展示如何使用 outline 属性来改变输入框获得焦点时的边框样式：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>使用 outline 改变输入框边框样式</title>
    <style>
        /* 设置默认的输入框样式 */
        input[type="text"] {
            padding: 5px;
            width: 200px;
            outline: none; /* 移除默认的轮廓线 */
            transition: outline 0.3s ease; /* 平滑过渡效果 */
        }

        /* 输入框获得焦点时的样式 */
        input[type="text"]:focus {
            outline: 2px solid blue; /* 设置轮廓样式 */
        }
    </style>
</head>
<body>
    <form>
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">

        <label for="email">邮箱:</label>
        <input type="text" id="email" name="email" placeholder="请输入邮箱地址">
    </form>
</body>
</html>

代码解析

1.CSS 样式:

设置了默认的输入框样式，包括内边距和宽度。

使用 outline: none; 移除了默认的轮廓线，使得焦点状态下的样式更加统一。

使用 transition 属性来添加平滑的过渡效果。

使用 :focus 伪类来设置当输入框获得焦点时的样式，包括使用 outline 添加蓝色的轮廓线。

2.HTML 结构:

定义了一个简单的表单，包含了两个输入框。

每个输入框都设置了 placeholder 属性，用于显示提示文本。

注意事项

outline 不会影响元素的布局，因此它不会影响到元素周围的其他元素。

outline 通常用于突出显示元素，比如当元素获得焦点时。