CSS outline(轮廓)
栏目：
CSS
发布时间：2024-11-14
CSS 中的 outline 属性用于在元素周围绘制一条轮廓线，但它与 border 有所不同。border 会占据空间并影响元素的总尺寸，而 outline 则绘制在元素的外边缘，不会占用额外空间。这使得 outline 特别适用于在不改变布局的情况下突出显示元素。
1. 基本用法
要应用轮廓，你可以使用 outline 简写属性，也可以分别设置 outline-width、outline-style 和 outline-color。
/* 简写属性 */
element {
outline: 2px solid red;
}
/* 分别设置 */
element {
outline-width: 2px;
outline-style: solid;
outline-color: red;
}
2. outline-width
设置轮廓的宽度。可以使用的值包括：
thin（默认值，通常为 1px）medium（通常为 3px）thick（通常为 5px）- 具体的长度值，如
2px、0.5em
element {
outline-width: thick;
}
3. outline-style
设置轮廓的样式。可以使用的值包括：
none（无轮廓）solid（实线）dotted（点状线）dashed（虚线）double（双线）groove（3D 凹槽效果）ridge（3D 垄状效果）inset（3D 内嵌效果）outset（3D 外嵌效果）
element {
outline-style: dashed;
}
4. outline-color
设置轮廓的颜色。可以使用颜色名称、RGB 值、十六进制颜色值等。
element {
outline-color: #00f; /* 十六进制颜色值 */
}
5. outline-offset
设置轮廓与元素边缘之间的偏移量。正值会使轮廓远离元素，负值会使轮廓靠近元素。
element {
outline: 2px solid red;
outline-offset: 4px;
}
6. 示例
下面是一个完整的示例，展示了如何为一个按钮元素添加轮廓：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Outline Example</title>
<style>
.outlined-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
outline: 3px dashed #3498db;
outline-offset: 2px;
transition: outline 0.3s;
}
.outlined-button:hover {
outline-color: #2980b9;
}
</style>
</head>
<body>
<button class="outlined-button">Hover Me</button>
</body>
</html>
在这个示例中，我们创建了一个带有轮廓的按钮，并在悬停时改变了轮廓的颜色。
7. 注意事项
1、轮廓不会占用布局空间，因此不会使元素变大或影响周围元素的布局。
2、轮廓通常用于用户交互（如突出显示选中的元素或聚焦的元素），但不应过度使用，以免影响用户体验。
3、在无障碍设计中，outline 对于指示用户当前交互的焦点元素（如表单输入）非常重要。
通过学习和实践这些 outline 属性的用法，你可以更好地控制网页元素的视觉表现，同时保持布局的整洁和用户体验的友好。
本文地址：https://www.tides.cn/p_css-outline