先看一张效果图:
其中二级菜单的四个角单独用符号装饰,为了不受拉伸影响,决定不用四个图片,而是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方法实现四角框的方法,用这个方法可以使每个小框的大小和清晰度不受画面大小影响。