css3实现边框锯齿效果 |ol css样式

在CSS3中，实现边框锯齿效果的方法是使用border-image和background-image这两种属性。代码如下：

.container {
border: none;
border-bottom: 10px solid;
border-image: url('jagged-line.png') 20 repeat;
background-image: url('jagged-line.png');
background-repeat: repeat-x;
background-position: center bottom;
}

在这段代码中，大家先用border:none来取消自带的边框，然后用border-bottom添加一个有颜色的边框线条。接着，大家使用border-image属性来定义边框图案，url()中的图片是大家要使用的“锯齿线”的图案，20表示切割图片的边框宽度，repeat表示让图片重复填充整个边框。

接下来，大家还要使用background-image和background-repeat属性来重复排版这个图案，使其填充整个容器的底部，这样整个边框的效果就达到了类似“锯齿”的效果。

需要注意的是，这种方法只能在现代浏览器中使用。如果你想要支持更老的浏览器，那么可以考虑使用图片模拟边框锯齿效果。