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 效果。
川公网安备 51010702002669号
18605917465
客服QQ