div制作四角边框

先看一张效果图：

其中二级菜单的四个角单独用符号装饰，为了不受拉伸影响，决定不用四个图片，而是css样式方法实现：

.partcomwithborder{
    background:
            linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left top no-repeat,
            linear-gradient(to right,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left top no-repeat,
            linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right top no-repeat,
            linear-gradient(to left,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right top no-repeat,
            linear-gradient(to top,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left bottom no-repeat,
            linear-gradient(to right,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left bottom no-repeat,
            linear-gradient(to top,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right bottom no-repeat,
            linear-gradient(to left,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right bottom no-repeat;
    background-size: 18px 18px;
    padding:4px;
    width:200px;
    height:200px;
}
.partcomwithbordersubcontent{
    border:1px solid #33cdfa;
    background:#01356799;
    width:100%;
    height:100%;
    padding:8px;
}

其中partcomwithborder为外侧四个边框的样式，partcomwithbordersubcontent为内侧带实边框和背景色的样式。

partcomwithborder中linear-gradient参数说明如下：
第一个参数：to bottom/left/right/top表示渐变色的方向；
第二个参数至后面所有参数：这是一个列表，用逗号分开，每项中有两个参数，用空格分开，比如上例中：#33cdfa 0px表示沿着第一个参数定义的方向上在0px位置的颜色是#33cdfa，#33cdfa 2px表示沿着指定方向2px位置处颜色是#33cdfa。
linear-gradient函数后面的top left表示分布在左上方。
partcomwithborder中background-size: 18px 18px表示每个小框的长度和宽度，所以在linear-gradient函数后面要添加no-repeat表示只显示一遍，不然会一直重复:

每个小框的长度是由linear-gradient内部从第二个参数开始的列表定义的，比如：

linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left top no-repeat

表示从上往下渐变，最上方颜色#33cdfa，往下2px位置仍然是#33cdfa，3px位置为透明，到100%高度位置为透明，这样渐变只在2px到3px中间发生，由于1px长度很短，所以看上去小框的长度为2px，高度是18px（由background-size定义），这个竖着的小框显示在左上角，其他小框依次类推。

这就是用div css方法实现四角框的方法，用这个方法可以使每个小框的大小和清晰度不受画面大小影响。