分享好友 教程首页 教程搜索 频道列表

在css中使用outline圆角效果

2023-04-12 18:413470
+关注28
核心提示:outline 属性在默认情况下是不支持圆角设置的,但可以通过 box-shadow 属性来模拟...

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


本文标签: #outline #圆角
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多
下一篇
我来说两句
抢沙发