首页 > 教程 > 网页特效源码 > 网页css

    收藏

    在css中使用outline圆角效果
    小黑2023-04-13网页css9℃
    广告
    核心提示: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; }

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

 
  • 文本链接:https://mbtxw.com/Course/show.php?itemid=147
  • 文章来源:原创
  • 版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。
标签: 圆角 outline

更多>同类教程

0相关评论