css实现图片对角边框线

x33g5p2x  于2022-03-11 转载在 其他  
字(1.0k)|赞(0)|评价(0)|浏览(447)

效果图:

代码:

  1. //阴影 颜色 内阴影
  2. box-shadow: 0 0 2.5vw #237ad4 inset;
  3. //设置颜色背景 设置方位
  4. background: linear-gradient(#1359df, #1359df) left top,
  5. linear-gradient(#1359df, #1359df) left top,
  6. linear-gradient(#1359df, #1359df) right top,
  7. linear-gradient(#1359df, #1359df) right top,
  8. linear-gradient(#1359df, #1359df) left bottom,
  9. linear-gradient(#1359df, #1359df) left bottom,
  10. linear-gradient(#1359df, #1359df) right bottom,
  11. linear-gradient(#1359df, #1359df) right bottom;
  12. background-repeat: no-repeat;
  13. //背景图片 宽 高 ,宽 高
  14. background-size: 0.1vw 18vw, 1.5vw 0.1vw;
  15. width: 300px;
  16. height: 220px;

background-size:用于定义背景宽高,上面声明了8个,所以他可以分别设置8个宽高

比如这样:

  1. #grad1 {
  2. height: 200px;
  3. background: linear-gradient(#1359df, #1359df),
  4. linear-gradient(#1359df, #1359df),
  5. linear-gradient(#1359df, #1359df) right top,
  6. linear-gradient(#1359df, #1359df) right top,
  7. linear-gradient(#1359df, #1359df) left bottom,
  8. linear-gradient(#1359df, #1359df) left bottom,
  9. linear-gradient(#1359df, #1359df) right bottom,
  10. linear-gradient(#1359df, #1359df) right bottom;
  11. //分别设置宽高
  12. background-size: 1vw 5vw, 1.5vw 0.1vw,0.1vw 5vw, 1.5vw 0.1vw,
  13. 0.1vw 5vw, 1.5vw 0.1vw,0.1vw 5vw, 1.5vw 0.1vw;
  14. background-repeat: no-repeat;
  15. }

效果图 :


 

相关文章