首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

带圆角的虚线边框CSS 不在话下

完整的代码,你可以戳这里:CodePen Demo -- BorderRadius Dashed Border 最佳解决方案:SVG 当然,上面使用 CSS 实现带圆角的虚线边框,还是需要一定的 CSS...譬如如果希望边框中间不是背景色,而是镂空的,上述两种 CSS 方式都将不再使用。 因此,对于带圆角的虚线边框场景,最佳方式一定是 SVG。...所以,本文再介绍一个非常有用的开源工具 -- Customize your CSS Border: 通过这个开源工具,我们可以快速生成我们想要的虚线边框效果,并且一键复制可以嵌入到 CSS background...通过一个动图,简单感受一下: 总结一下 本文介绍了 2 种在 CSS 中,不借助切图和 SVG 实现带圆角的虚线边框的方式: 重复角向渐变叠加遮罩层 重复线性渐变叠加遮罩层 当然,两种 CSS 方式都存在一定瑕疵...最后,介绍了借助 SVG 工具 Customize your CSS Border 快速生成带圆角的虚线边框的方式。

17710

CSS 边框秘探

CSS 边框秘探 1. 半透明边框 相信你以前肯定尝试过 CSS 中的半透明颜色,比如 rgba() 和 hsla()。...在 CSS 2.1 中,这就是背景的工作原理。值得庆幸的是,我们可以通过 background-clip 属性来调整上述默认行为所带来的不便。...多重边框 2.1 box-shadow 我们通常希望在 CSS 代码层面以更灵活的方式来调整边框样式。比如使用多个元素来模拟多重边框。...这种方法的一大优点在于边框样式十分灵活,不像上面的 box-shadow 方案只能模拟实线边框 (假设我们需要产生虚线边框效果,box-shadow 就没辙了)。...image-20220526231206158 对一层 dashed(虚线)描边使用 负 的 outline-offset 后, 可 以得到简单的缝边效果。 这个方法同样也有一些需要注意的地方。

2.1K10
领券