在网上找了一个实现锯齿形边框的:
css 主要代码如下
background-image:-webkit-gradient(
linear,//表示渐变的为直线 另外一个值是radial
50% 0,//直线型渐变的起点位置 后边有一个属性background-size规定背景的大小,30 X 15px 50% 0 都是乘以父元素的宽高。
0 100%,//结束点的位置 和上类似
from(transparent),//起点的颜色
color-stop(.5,transparent), //中间某一个点必须达到这个颜色,表示变化过程 .5b表示这个渐变范围长度的总长的50%
color-stop(.5,#d86707),//同上
to(#d86707)),//结束段的颜色
//一个背景块的分为两个15X 15 组成。
-webkit-gradient(linear,50% 0,100% 100%,from(transparent),
color-stop(.5,transparent),
color-stop(.5,#d86707),
to(#d86707));
background-size:30px 15px;
background-repeat:repeat-x;
background-position:0 100%;
你可以给你的body 应用以上样式,那么效果类似下图:
background-image:-webkit-gradient(
radial,
50% 0,15,50% 0 ,17,from(#d86707),color-stop(50%, #d86707),color-stop(50%, #FFF),
to(#FFF));
//注意 圆的半径17表示17px
以上代码为弧形的 边框 类似下图