为了账号安全,请及时绑定邮箱和手机立即绑定

前端表格如何实现图中的边框

前端表格如何实现图中的边框

慕码人2483693 2019-03-13 16:15:46
如下图所示的边框线条(PS:主要是边框的样式,是有锯齿状的卡槽那种的,类似于波纹)
查看完整描述

3 回答

?
暮色呼如

TA贡献1853条经验 获得超9个赞

sawtooth-border

简单解释:

  1. 后面两层背景图实现锯齿,这样整个 td 都是锯齿,包括border

  2. 再做一层纯白背景,放在最上面,只覆盖到,padding-box,这样 border 还是原来的锯齿背景,padding-box 就是纯白背景。

  3. 锯齿背景用 linear-gradient,背景图的覆盖范围通过 background-clip 调整。


查看完整回答
反对 回复 2019-03-30
?
扬帆大鱼

TA贡献1799条经验 获得超9个赞

table有合并行合并列属性可以实现不同矩形区块=》colspan,rowspan至于边框的样式
dashednone 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit
如果没有只能用css和css3实现例如实现倒三角

查看完整回答
反对 回复 2019-03-30
  • 3 回答
  • 0 关注
  • 857 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信