html实现信封效果,css信封边框效果实现的2种方法

信封边框

信封描边的效果大致如下图所示，这里的边框有红白蓝三种颜色，所以可以使用重复线性渐变的方法来完成：

信封边框有两种实现思路：

1、使用背景渐变html>

.uu{

width: 200px;

height: 70px;

padding:1em;

border: 1em solid transparent;

background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;

}

2、使用边框图片html>

.uu{

width: 200px;

height: 70px;

padding: 1em;

border: 1em solid transparent;

background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;

}