視訊直播原始碼,css實現圖片對角邊框線

zhibo系統開發發表於2022-06-07

視訊直播原始碼,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實現圖片對角邊框線, 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2899176/,如需轉載,請註明出處,否則將追究法律責任。

相關文章