视频直播源码,css实现图片对角边框线

视频直播源码,css实现图片对角边框线
代码:

 //阴影                颜色   内阴影
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;
}

以上就是视频直播源码,css实现图片对角边框线, 更多内容欢迎关注之后的文章

猜你喜欢

转载自blog.csdn.net/yb1314111/article/details/125164201