outline 属性在默认情况下是不支持圆角设置的,但可以通过 box-shadow 属性来模拟出类似于带有圆角的 outline 效果。以下是示例代码:
button { padding: 10px; background-color: #007bff; color: white; font-size: 16px; border: none; outline: none; box-shadow: 0 0 0 2px white, 0 0 0 4px #007bff; border-radius: 20px; }
该样式会将按钮的边框和文字颜色都设为白色,背景颜色为蓝色。使用 border 和 outline 都设置为 none 来去掉默认边框和点击效果。然后使用 box-shadow 来模拟带圆角的 outline 效果,同时设置了 border-radius 属性来实现圆角效果。
值得注意的是,由于使用 box-shadow 来模拟带圆角的 outline,所以在 CSS3 标准中并没有规定 box-shadow 属性是否应该被键盘聚焦到元素时表现为 outline。如果需要遵循 WCAG 网络无障碍标准,则建议在给可键盘聚焦的元素添加 :focus 伪类样式来实现 outline 效果。