html透明 四角边框,给div来个酷炫的四角边框—linear-gradient

.border1 {

background: linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left top no-repeat,

linear-gradient(to bottom, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left top no-repeat,

linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right top no-repeat,

linear-gradient(to bottom, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right top no-repeat,

linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left bottom no-repeat,

linear-gradient(to bottom, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left bottom no-repeat,

linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right bottom no-repeat,

linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right bottom no-repeat;

/*设置大小*/

background-size: 0.15rem 0.6rem, 0.6rem 0.15rem, 0.15rem 0.6rem, 0.6rem 0.15rem;

}

.border2 {

margin: 300px auto;

width: 200px;

height: 100px;

background: linear-gradient(blue, blue) left top,

linear-gradient(blue, blue) left top,

linear-gradient(blue, blue) right top,

linear-gradient(blue, blue) right top,

linear-gradient(blue, blue) left bottom,

linear-gradient(blue, blue) left bottom,

linear-gradient(blue, blue) right bottom,

linear-gradient(blue, blue) right bottom;

background-repeat: no-repeat;

background-size: 1px 24px, 24px 1px;

}

.card{

background: radial-gradient(circle at center center, rgba(23, 48, 78, 1), rgba(20, 37, 63, 1)),

linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left top,

linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left top,

linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right top,

linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right top,

linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left bottom,

linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left bottom,

linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right bottom,

linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right bottom,

linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top,

linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom,

linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left,

linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right;

background-repeat: no-repeat;

background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%;

background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;

}