chrome标签栏下置,chrome标签管理插件

　　这一次，我们来看一个带有特殊圆角的导航栏布局，比如谷歌浏览器的标签栏如下：

　　如何实现这样的布局？下面介绍一下方法。

一、伪元素拼接

　　假设有这样的HTML结构

　　class= tab a class= tab-item svelite API/a class= tab-item active svelite API/a class= tab-item svelite API/a class= tab-item svelite API/a/nav首先要考虑的方法之一是拼接两个伪元素。

　　中间的里脊很容易。左右两边倒圆角怎么实现？其实可以想出一些可以实现圆的风格。这里我想到了border-radius，可以这样实现。

　　画一个透明的圆，给圆加一个足够大的边框，或者用投影的方式切掉一小部分，如下图。

　　代码中的实现是。选项卡项目{ position:relative；背景色：红色；填充：10px 15pxborder-radius:12px 12px 0 0；光标：指针；过渡： 2s；}.tab-item:之前，tab-item:在{ position:absolute；底部：0；内容：“”；宽度：20px高度：20px边框半径：100%；箱形阴影：0 0 0 40px红色；/*使用框阴影不影响大小*/transition: 2s；}.tab-item:before { left:-20px；剪辑路径：插入(50%-10px 0 50%)；}.tab-item:after { right:-20px；剪辑路径：插入(50% 50% 0-10px)；}最终的实时效果如下

　　这里使用的是剪辑路径。注意左右两边可以稍微向内夹一点，避免拼接时出现缝隙。可以在chrome-tab (codepen.io)中访问完成的代码。

　　当然这里的倒圆角也可以通过径向渐变来实现，然后往下看。

　　第二，全能渐变

　　CSS渐变几乎无所不能，什么图形都可以画。给你，你可以把它分开。有两个矩形，两个圆形，两个反向圆角，也就是两个线性渐变，四个径向渐变。示意图如下

　　代码中的实现是。tab-item { padding:10px 35px；背景图像：径向梯度(0 0处的圆，透明15px，蓝色0)，径向梯度(0 0处的圆，透明15px，蓝色0)，径向梯度(0 0处的圆，绿色12px，透明0)，径向梯度(12px 0处的圆，绿色12px，透明0)，线性梯度(红色，红色)；背景-重复：不重复；background-position: 15px top，right 15px top 0，left bottom，right bottom，center bottom，center，bootom背景尺寸：30px 30px，30px 30px，12px 12px，12px 12px，calc(100% - 30px) calc(100% - 12px)，calc(100%-54px)100%；}虽然实现了，但是很啰嗦。仔细观察发现，两个圆可以通过平铺来实现，两个反向圆角可以看作一个半圆，然后也可以平铺。示意图如下

　　这样，只需要两个径向梯度，代码如下。选项卡项目{ position:relative；填充：10px 35px光标：指针；背景图像：径向渐变(15px 0的圆，透明15px，蓝色0)，径向渐变(27px 12px的圆，绿色12px，透明0)，线性渐变(红色，红色)，线性渐变(红色，红色)；背景-大小：100% 15px，calc(100% - 54px)，calc(100% - 30px) calc(100% - 12px)，calc(100%-54px)100%；背景-位置：-15px底部，左上，中心底部，中心底部；背景-重复：重复-x，重复-x，不重复，不重复；}最终的实时效果如下(上图示意图)

　　完成的代码可以访问chrome-tab-gradient (codepen.io)

三、自适应的svg

　　渐变万能，但是码比大，非常考验耐心。对于这个例子，svg也是一个很好的解决方案。

　　中间的圆角矩形很容易，用rect就行。

　　xmlns= http://www.w3.org/2000/SVG宽度= 100% 高度= 100% rectrx= 12 宽度= 100% 高度= 100% 填充= # 3a8eff/SVG

　　SVG width= 100 height= 100 view box= 0 0 100 100 fill= none xmlns= http://www。w3。org/2000/SVG path fill-rule= even odd clip-rule= even odd d= M0 100c 55.2285 100 100 55.2285 100 00 v100 h0z fill= # 3 A8 eff /SVG SVG然后把这3段挽救(保存的简写)代码作为背景就可以了，可以用背景尺寸和背景位置进行调整和控制。选项卡项目{位置：相对；填充：10px 35px边距：0-15px；光标：指针；过渡：2s；background-image:URL( data:image/SVG XML，

　　完整代码可以访问chrome-tab-svg (codepen.io)

　　另外，有人可能会奇怪，这里**为什么要用3段svg？用一段挽救(保存的简写)里面包含3个路径不行吗？**答案是不行的。挽救（saving的简写）里没法灵活使用定位，比如要实现位于右下角，svg只能使用100% 而不能使用计算(100% - 12px)，更别说半铸钢钢性铸铁(铸造半钢)还有右下方这样的定位属性了，所以必须采用半铸钢钢性铸铁(铸造半钢)多背景实现

四、图片边框

　　 上面几种方式还是觉得太复杂了，能不能**"切图"**呢？当然也是可以的，不过也需要一定的技巧，这样才能实现自适应。这里可以采用CSS3边框-图像来实现。关于边框图像可以参考这篇文章：果冻边框-图像的正确用法（京东商城).

　　准备这样一张图就可以了，svg或者png都行

　　挽救(保存的简写)如下

　　SVG width= 67 height= 33 view box= 0 0 67 33 fill= none xmlns= http://www。w3。org/2000/SVG path fill-rule= even odd clip-rule= even odd d= M27 0c-6.627 0-12 5.373-12 12v6c 0 8.284-6.716 15-15 15 h67 c-8.27接着根据边框图像规范进行切割就行了

　　代码实现如下，记得要加上边界。选项卡项目{位置：相对；填充：0 8px边距：0-15px；光标：指针；边框宽度：12px 27px 15px边框样式：纯色；border-image:URL( data:image/SVG XML，

　　完整代码可以访问chrome-tab-border-image(代码笔。io)

　　虽然代码实现比较简介，但是由于要加上边框，导致内容尺寸有些不好控制

五、mask 遮罩

　　 前面几种背景图片的方式，其实有一个问题，颜色都在背景图片中，几乎是固定的，不方便修改，那么，借助面具遮罩，可以很轻松的解决这个问题。

　　有了前面的背景（渐变或者挽救(保存的简写)都行),只需要把背景批量换成-网络工具包-面具就行了，就像这样

　　以挽救(保存的简写)为例，替换以后如下。选项卡项目{ position:relative；填充：10px 35px光标：指针；背景：# F8EAE7-WebKit-mask-image:URL( data:image/SVG XML，

　　另外，喜欢* *“切图”* *的也可以用mask-border来实现，基本和上面的border-image一样，只是遮罩效果不同。

　　或者用这张图来剪。

　　代码实现是。选项卡项目{ /*.*/-WebKit-mask-box-image:URL( data:image/SVG XML，

　　完整的代码可以从chrome-tab-mask-border(code pen . io)访问

　　目前有一个备选属性-webkit-mask-box-image可以在草稿中使用。

六、总结和说明

　　以上介绍了五种不同的布局模式。以下是实施要点的总结：

　　边界半径与剪辑路径可以实现凹圆角梯度，这是万能的。重复的内容可以通过后台-重复来完成。svg中的rect可以实现自适应圆角矩形，也适用于背景。多段svg可以作为多背景。分别控制边缘图像的大小和位置可以达到自适应的效果。你需要注意设置边框宽度遮罩。可以直接使用渐变或者svg作为蒙版图层，可以更方便的修改背景色。遮罩-边框和边框-图像是相似的。但是，目前只有-webkit- kernel支持这一点。这篇关于CSS实现Chrome标签栏的技巧的文章就介绍在这里。更多相关CSS Chrome标签栏内容，请搜索之前的文章或者继续浏览下面的相关文章。希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。