web 中怎麼實現斜線表頭效果?

xiaohuihui發表於2020-06-24

1. 直接做一個帶有斜線和文字的圖片,在 html 中引用。

缺點:要求圖片大小能和格子大小相同。頁面做了自適應的功能的話,圖片上的線可能會失真,效果不夠理想。

2. 用 css3 的標籤 canvas,將其作為畫布畫一條斜線。

缺點:會存在瀏覽器相容性問題,如果只需要在 chrom 中使用可以考慮。

其實現在大部分專案中做表都會用報表工具,工具中就基本都有這個功能了,設定方式也很簡單,潤乾報表中只要直接點選個按鈕就輕鬆實現效果,也不用擔心有什麼瀏覽器相容的問題,具體可以參考看下文章
文章中除了斜線表頭外,還有其他型別的特殊邊框效果的實現方法。

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

相關文章