📌 📄 内容摘要:
思無邪 (@Clarke.L) 在 chrome页签圆角样式的实现思路 中发帖
早上起床冲浪，看到周六凌晨一点多还在奋斗的佬发来的一条私信，询问类似谷歌浏览器页签样式该如何实现，这和准备摆烂的我形成强烈对比，一股强大的力量将我从床上拉起，准备整一下这个命题。
[image]
[image]
一般而言，看到这种东西，首先想到的就是使用伪元素来拼接。
思路一：伪元素拼接
将整体拆开，其实可以发现，就是一个中间的圆角矩形 + 两侧的弧形边角。
中间的圆角矩形大家都会，加个border-radius 就OK了！难点就在于两侧的弧形边角。
说到弧形，我们首先应该想到的是圆！那么我们是不是可以在一个圆中截取其中一部分呢？这么一想，是不是又打开了新世界~
我们需要的是某个部分为透明的，所以我们可以画一个空心圆，内部为透明，外层为填充色，这个实现方法很多，我们就以透明圆为例，画一个透明圆，然后加一个很大的边框！为了不影响尺寸和方便计算，我们就直接 使用box-shado...
────────── 链接信息 ──────────
🔗 论坛链接: linux.do
📎 访问地址: https://linux.do/t/topic/242742/1
─────────────────────────────
📢 来源：LINUX DO
