效果图:
代码:
//阴影 颜色 内阴影
box-shadow: 0 0 2.5vw #237ad4 inset;
//设置颜色背景 设置方位
background: linear-gradient(#1359df, #1359df) left top,
linear-gradient(#1359df, #1359df) left top,
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) right bottom,
linear-gradient(#1359df, #1359df) right bottom;
background-repeat: no-repeat;
//背景图片 宽 高 ,宽 高
background-size: 0.1vw 18vw, 1.5vw 0.1vw;
width: 300px;
height: 220px;
background-size:用于定义背景宽高,上面声明了8个,所以他可以分别设置8个宽高
比如这样:
#grad1 {
height: 200px;
background: linear-gradient(#1359df, #1359df),
linear-gradient(#1359df, #1359df),
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) right top,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) left bottom,
linear-gradient(#1359df, #1359df) right bottom,
linear-gradient(#1359df, #1359df) right bottom;
//分别设置宽高
background-size: 1vw 5vw, 1.5vw 0.1vw,0.1vw 5vw, 1.5vw 0.1vw,
0.1vw 5vw, 1.5vw 0.1vw,0.1vw 5vw, 1.5vw 0.1vw;
background-repeat: no-repeat;
}
效果图 :
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_52691965/article/details/123425771
内容来源于网络,如有侵权,请联系作者删除!