要实现轮廓聚焦样式,我们可以使用 CSS 的 :focus 伪类选择器来为被聚焦的元素设置样式。 一般来说,用户在使用键盘通过 tab 键或者 Shift+Tab 键切换页面元素时会触发聚焦行为。
为了提高用户的可访问性,应该为聚焦的元素添加视觉指示,例如设置一个颜色明显、宽度合适的边框或者阴影效果。
具体而言,需要注意以下几点:
示例代码如下:
/* 通用聚焦样式 */
:focus {
outline: 2px solid yellow;
}
/* 按钮聚焦样式 */
button:focus {
outline: 3px dotted blue;
}
/* 链接聚焦样式 */
a:focus {
outline: 2px dashed red;
}