css实现上边框锯齿 |css样式渐变条不透明度

.box {
width: 200px;
height: 100px;
border-top: 1px solid #000;
position: relative;
}
.box:before {
content: "";
position: absolute;
top: -10px;
left: 0;
width: 0;
height: 0;
border-left: 110px solid transparent;
border-right: 110px solid transparent;
border-bottom: 10px solid #000;
}

上述代码中，大家首先定义了一个宽为200px，高为100px的盒子，并给它添加了一个黑色的上边框。然后，大家使用伪元素:before来实现上边框锯齿的效果。

在:before中，大家设置了一个宽度为0，高度为0的伪元素，并通过border-left和border-right来定义了一个110px宽的等腰三角形，使用border-bottom来设置了三角形的颜色和高度。

由于伪元素是在盒子的上方绘制的，所以大家将它的top设置为-10px，让它和盒子的上边框对齐。最后，大家还需要将伪元素的position设置为absolute，让它从文档流中脱离，不会影响原有的布局。

这样，大家就成功地使用CSS实现了上边框锯齿的效果。