在css中使用outline圆角效果

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 效果。