Element Plus 的 CSS 变量

发表于 分类于 阅读次数： 本文字数： 40k 阅读时长 ≈ 36 分钟

前言

在使用 Vue.js 和 Element Plus 做项目时，会有封装自定义组件的需求，而自定义组件通常会有使用原生HTML元素的情况，如果自己写样式，很难与 Element Plus 的风格保持一致，即便费力保持风格一致，也难以响应Element Plus 暗黑模式。于是，不如直接给原生HTML元素挂上 Element Plus 的样式，也就是通过 Element Plus 所定义的 CSS变量，赋予一致的样式。

不过 Element Plus 对于自己所定义的CSS变量并没有做详尽的说明，只在 Color 色彩 里出现了一些，索性问了问 DeepSeek，将获得的结论做如下整理。

查看可用颜色

在引入了 Element Plus 的网页上执行，就可以得到结果

1
2
3
4
5
6
7
8
9
10
11
// 在浏览器控制台中获取所有颜色变量
const styles = getComputedStyle(document.documentElement);
const colorVariables = Array.from(styles)
  .filter(name => name.startsWith('--el-color-'))
  .map(name => ({
    name,
    value: styles.getPropertyValue(name)
  }))
  .sort((a, b) => a.name.localeCompare(b.name));

console.log(colorVariables);

--el-color-

Color 色彩（50个，点击单元格复制，无提示）：
CSS 变量 Light Mode HEX RGB Dark Mode HEX RGB
--el-color-black #000000 rgb(0, 0, 0) #000000 rgb(0, 0, 0)
--el-color-danger #f56c6c rgb(245, 108, 108) #f56c6c rgb(245, 108, 108)
--el-color-danger-dark-2 #c45656 rgb(196, 86, 86) #f78989 rgb(247, 137, 137)
--el-color-danger-light-3 #f89898 rgb(248, 152, 152) #b25252 rgb(178, 82, 82)
--el-color-danger-light-5 #fab6b6 rgb(250, 182, 182) #854040 rgb(133, 64, 64)
--el-color-danger-light-7 #fcd3d3 rgb(252, 211, 211) #582e2e rgb(88, 46, 46)
--el-color-danger-light-8 #fde2e2 rgb(253, 226, 226) #412626 rgb(65, 38, 38)
--el-color-danger-light-9 #fef0f0 rgb(254, 240, 240) #2a1d1d rgb(42, 29, 29)
--el-color-danger-rgb #f56c6c rgb(245, 108, 108) #f56c6c rgb(245, 108, 108)
--el-color-error #f56c6c rgb(245, 108, 108) #f56c6c rgb(245, 108, 108)
--el-color-error-dark-2 #c45656 rgb(196, 86, 86) #f78989 rgb(247, 137, 137)
--el-color-error-light-3 #f89898 rgb(248, 152, 152) #b25252 rgb(178, 82, 82)
--el-color-error-light-5 #fab6b6 rgb(250, 182, 182) #854040 rgb(133, 64, 64)
--el-color-error-light-7 #fcd3d3 rgb(252, 211, 211) #582e2e rgb(88, 46, 46)
--el-color-error-light-8 #fde2e2 rgb(253, 226, 226) #412626 rgb(65, 38, 38)
--el-color-error-light-9 #fef0f0 rgb(254, 240, 240) #2a1d1d rgb(42, 29, 29)
--el-color-error-rgb #f56c6c rgb(245, 108, 108) #f56c6c rgb(245, 108, 108)
--el-color-info #909399 rgb(144, 147, 153) #909399 rgb(144, 147, 153)
--el-color-info-dark-2 #73767a rgb(115, 118, 122) #a6a9ad rgb(166, 169, 173)
--el-color-info-light-3 #b1b3b8 rgb(177, 179, 184) #6b6d71 rgb(107, 109, 113)
--el-color-info-light-5 #c8c9cc rgb(200, 201, 204) #525457 rgb(82, 84, 87)
--el-color-info-light-7 #dedfe0 rgb(222, 223, 224) #393a3c rgb(57, 58, 60)
--el-color-info-light-8 #e9e9eb rgb(233, 233, 235) #2d2d2f rgb(45, 45, 47)
--el-color-info-light-9 #f4f4f5 rgb(244, 244, 245) #202121 rgb(32, 33, 33)
--el-color-info-rgb #909399 rgb(144, 147, 153) #909399 rgb(144, 147, 153)
--el-color-primary #409eff rgb(64, 158, 255) #409eff rgb(64, 158, 255)
--el-color-primary-dark-2 #337ecc rgb(51, 126, 204) #66b1ff rgb(102, 177, 255)
--el-color-primary-light-3 #79bbff rgb(121, 187, 255) #3375b9 rgb(51, 117, 185)
--el-color-primary-light-5 #a0cfff rgb(160, 207, 255) #2a598a rgb(42, 89, 138)
--el-color-primary-light-7 #c6e2ff rgb(198, 226, 255) #213d5b rgb(33, 61, 91)
--el-color-primary-light-8 #d9ecff rgb(217, 236, 255) #1d3043 rgb(29, 48, 67)
--el-color-primary-light-9 #ecf5ff rgb(236, 245, 255) #18222b rgb(24, 34, 43)
--el-color-primary-rgb #409eff rgb(64, 158, 255) #409eff rgb(64, 158, 255)
--el-color-success #67c23a rgb(103, 194, 58) #67c23a rgb(103, 194, 58)
--el-color-success-dark-2 #529b2e rgb(82, 155, 46) #85ce61 rgb(133, 206, 97)
--el-color-success-light-3 #95d475 rgb(149, 212, 117) #4e8e2f rgb(78, 142, 47)
--el-color-success-light-5 #b3e19d rgb(179, 225, 157) #3e6b27 rgb(62, 107, 39)
--el-color-success-light-7 #d1edc4 rgb(209, 237, 196) #2d481f rgb(45, 72, 31)
--el-color-success-light-8 #e1f3d8 rgb(225, 243, 216) #25371c rgb(37, 55, 28)
--el-color-success-light-9 #f0f9eb rgb(240, 249, 235) #1c2518 rgb(28, 37, 24)
--el-color-success-rgb #67c23a rgb(103, 194, 58) #67c23a rgb(103, 194, 58)
--el-color-warning #e6a23c rgb(230, 162, 60) #e6a23c rgb(230, 162, 60)
--el-color-warning-dark-2 #b88230 rgb(184, 130, 48) #ebb563 rgb(235, 181, 99)
--el-color-warning-light-3 #eebe77 rgb(238, 190, 119) #a77730 rgb(167, 119, 48)
--el-color-warning-light-5 #f3d19e rgb(243, 209, 158) #7d5b28 rgb(125, 91, 40)
--el-color-warning-light-7 #f8e3c5 rgb(248, 227, 197) #533f20 rgb(83, 63, 32)
--el-color-warning-light-8 #faecd8 rgb(250, 236, 216) #3e301c rgb(62, 48, 28)
--el-color-warning-light-9 #fdf6ec rgb(253, 246, 236) #292218 rgb(41, 34, 24)
--el-color-warning-rgb #e6a23c rgb(230, 162, 60) #e6a23c rgb(230, 162, 60)
--el-color-white #ffffff rgb(255, 255, 255) #ffffff rgb(255, 255, 255) 
1
2
// light length: 50
[{"name":"--el-color-black","value":"#000000"},{"name":"--el-color-danger","value":"#f56c6c"},{"name":"--el-color-danger-dark-2","value":"rgb(196, 86, 86)"},{"name":"--el-color-danger-light-3","value":"rgb(248, 152, 152)"},{"name":"--el-color-danger-light-5","value":"rgb(250, 182, 182)"},{"name":"--el-color-danger-light-7","value":"rgb(252, 211, 211)"},{"name":"--el-color-danger-light-8","value":"rgb(253, 226, 226)"},{"name":"--el-color-danger-light-9","value":"rgb(254, 240, 240)"},{"name":"--el-color-danger-rgb","value":"245, 108, 108"},{"name":"--el-color-error","value":"#f56c6c"},{"name":"--el-color-error-dark-2","value":"rgb(196, 86, 86)"},{"name":"--el-color-error-light-3","value":"rgb(248, 152, 152)"},{"name":"--el-color-error-light-5","value":"rgb(250, 182, 182)"},{"name":"--el-color-error-light-7","value":"rgb(252, 211, 211)"},{"name":"--el-color-error-light-8","value":"rgb(253, 226, 226)"},{"name":"--el-color-error-light-9","value":"rgb(254, 240, 240)"},{"name":"--el-color-error-rgb","value":"245, 108, 108"},{"name":"--el-color-info","value":"#909399"},{"name":"--el-color-info-dark-2","value":"rgb(115, 118, 122)"},{"name":"--el-color-info-light-3","value":"rgb(177, 179, 184)"},{"name":"--el-color-info-light-5","value":"rgb(200, 201, 204)"},{"name":"--el-color-info-light-7","value":"rgb(222, 223, 224)"},{"name":"--el-color-info-light-8","value":"rgb(233, 233, 235)"},{"name":"--el-color-info-light-9","value":"rgb(244, 244, 245)"},{"name":"--el-color-info-rgb","value":"144, 147, 153"},{"name":"--el-color-primary","value":"#409eff"},{"name":"--el-color-primary-dark-2","value":"rgb(51, 126, 204)"},{"name":"--el-color-primary-light-3","value":"rgb(121, 187, 255)"},{"name":"--el-color-primary-light-5","value":"rgb(160, 207, 255)"},{"name":"--el-color-primary-light-7","value":"rgb(198, 226, 255)"},{"name":"--el-color-primary-light-8","value":"rgb(217, 236, 255)"},{"name":"--el-color-primary-light-9","value":"rgb(236, 245, 255)"},{"name":"--el-color-primary-rgb","value":"64, 158, 255"},{"name":"--el-color-success","value":"#67c23a"},{"name":"--el-color-success-dark-2","value":"rgb(82, 155, 46)"},{"name":"--el-color-success-light-3","value":"rgb(149, 212, 117)"},{"name":"--el-color-success-light-5","value":"rgb(179, 225, 157)"},{"name":"--el-color-success-light-7","value":"rgb(209, 237, 196)"},{"name":"--el-color-success-light-8","value":"rgb(225, 243, 216)"},{"name":"--el-color-success-light-9","value":"rgb(240, 249, 235)"},{"name":"--el-color-success-rgb","value":"103, 194, 58"},{"name":"--el-color-warning","value":"#e6a23c"},{"name":"--el-color-warning-dark-2","value":"rgb(184, 130, 48)"},{"name":"--el-color-warning-light-3","value":"rgb(238, 190, 119)"},{"name":"--el-color-warning-light-5","value":"rgb(243, 209, 158)"},{"name":"--el-color-warning-light-7","value":"rgb(248, 227, 197)"},{"name":"--el-color-warning-light-8","value":"rgb(250, 236, 216)"},{"name":"--el-color-warning-light-9","value":"rgb(253, 246, 236)"},{"name":"--el-color-warning-rgb","value":"230, 162, 60"},{"name":"--el-color-white","value":"#ffffff"}]
1
2
// dark length: 50
[{"name":"--el-color-black","value":"#000000"},{"name":"--el-color-danger","value":"#f56c6c"},{"name":"--el-color-danger-dark-2","value":"rgb(247, 137, 137)"},{"name":"--el-color-danger-light-3","value":"rgb(178, 82, 82)"},{"name":"--el-color-danger-light-5","value":"rgb(133, 64, 64)"},{"name":"--el-color-danger-light-7","value":"rgb(88, 46, 46)"},{"name":"--el-color-danger-light-8","value":"rgb(65, 38, 38)"},{"name":"--el-color-danger-light-9","value":"rgb(42, 29, 29)"},{"name":"--el-color-danger-rgb","value":"245, 108, 108"},{"name":"--el-color-error","value":"#f56c6c"},{"name":"--el-color-error-dark-2","value":"rgb(247, 137, 137)"},{"name":"--el-color-error-light-3","value":"rgb(178, 82, 82)"},{"name":"--el-color-error-light-5","value":"rgb(133, 64, 64)"},{"name":"--el-color-error-light-7","value":"rgb(88, 46, 46)"},{"name":"--el-color-error-light-8","value":"rgb(65, 38, 38)"},{"name":"--el-color-error-light-9","value":"rgb(42, 29, 29)"},{"name":"--el-color-error-rgb","value":"245, 108, 108"},{"name":"--el-color-info","value":"#909399"},{"name":"--el-color-info-dark-2","value":"rgb(166, 169, 173)"},{"name":"--el-color-info-light-3","value":"rgb(107, 109, 113)"},{"name":"--el-color-info-light-5","value":"rgb(82, 84, 87)"},{"name":"--el-color-info-light-7","value":"rgb(57, 58, 60)"},{"name":"--el-color-info-light-8","value":"rgb(45, 45, 47)"},{"name":"--el-color-info-light-9","value":"rgb(32, 33, 33)"},{"name":"--el-color-info-rgb","value":"144, 147, 153"},{"name":"--el-color-primary","value":"#409eff"},{"name":"--el-color-primary-dark-2","value":"rgb(102, 177, 255)"},{"name":"--el-color-primary-light-3","value":"rgb(51, 117, 185)"},{"name":"--el-color-primary-light-5","value":"rgb(42, 89, 138)"},{"name":"--el-color-primary-light-7","value":"rgb(33, 61, 91)"},{"name":"--el-color-primary-light-8","value":"rgb(29, 48, 67)"},{"name":"--el-color-primary-light-9","value":"rgb(24, 34, 43)"},{"name":"--el-color-primary-rgb","value":"64, 158, 255"},{"name":"--el-color-success","value":"#67c23a"},{"name":"--el-color-success-dark-2","value":"rgb(133, 206, 97)"},{"name":"--el-color-success-light-3","value":"rgb(78, 142, 47)"},{"name":"--el-color-success-light-5","value":"rgb(62, 107, 39)"},{"name":"--el-color-success-light-7","value":"rgb(45, 72, 31)"},{"name":"--el-color-success-light-8","value":"rgb(37, 55, 28)"},{"name":"--el-color-success-light-9","value":"rgb(28, 37, 24)"},{"name":"--el-color-success-rgb","value":"103, 194, 58"},{"name":"--el-color-warning","value":"#e6a23c"},{"name":"--el-color-warning-dark-2","value":"rgb(235, 181, 99)"},{"name":"--el-color-warning-light-3","value":"rgb(167, 119, 48)"},{"name":"--el-color-warning-light-5","value":"rgb(125, 91, 40)"},{"name":"--el-color-warning-light-7","value":"rgb(83, 63, 32)"},{"name":"--el-color-warning-light-8","value":"rgb(62, 48, 28)"},{"name":"--el-color-warning-light-9","value":"rgb(41, 34, 24)"},{"name":"--el-color-warning-rgb","value":"230, 162, 60"},{"name":"--el-color-white","value":"#ffffff"}]

查看可用样式

在引入了 Element Plus 的网页上执行，就可以得到结果

1
2
3
4
5
6
7
8
9
10
11
// 在浏览器控制台中获取所有颜色变量
const styles = getComputedStyle(document.documentElement);
const styleVariables = Array.from(styles)
  .filter(name => name.startsWith('--el-') && !name.startsWith('--el-color-'))
  .map(name => ({
    name,
    value: styles.getPropertyValue(name)
  }))
  .sort((a, b) => a.name.localeCompare(b.name));

console.log(styleVariables);

--el-

Element Plus CSS 变量（87个，点击单元格复制，无提示）：
CSS 变量 Light Mode Value Dark Mode Value
--el-bg-color #ffffff #141414
--el-bg-color-overlay #ffffff #1d1e1f
--el-bg-color-page #f2f3f5 #0a0a0a
--el-border 1px solid #dcdfe6 1px solid #4C4D4F
--el-border-color #dcdfe6 #4C4D4F
--el-border-color-dark #d4d7de #58585B
--el-border-color-darker #cdd0d6 #636466
--el-border-color-extra-light #f2f6fc #2B2B2C
--el-border-color-hover #c0c4cc #6C6E72
--el-border-color-light #e4e7ed #414243
--el-border-color-lighter #ebeef5 #363637
--el-border-radius-base 4px 4px
--el-border-radius-circle 100% 100%
--el-border-radius-round 20px 20px
--el-border-radius-small 2px 2px
--el-border-style solid solid
--el-border-width 1px 1px
--el-box-shadow 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08) 0px 12px 32px 4px rgba(0, 0, 0, .36), 0px 8px 20px rgba(0, 0, 0, .72)
--el-box-shadow-dark 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16) 0px 16px 48px 16px rgba(0, 0, 0, .72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000
--el-box-shadow-light 0px 0px 12px rgba(0, 0, 0, .12) 0px 0px 12px rgba(0, 0, 0, .72)
--el-box-shadow-lighter 0px 0px 6px rgba(0, 0, 0, .12) 0px 0px 6px rgba(0, 0, 0, .72)
--el-component-size 32px 32px
--el-component-size-large 40px 40px
--el-component-size-small 24px 24px
--el-disabled-bg-color #f5f7fa #262727
--el-disabled-border-color #e4e7ed #414243
--el-disabled-text-color #a8abb2 #8D9095
--el-fill-color #f0f2f5 #303030
--el-fill-color-blank #ffffff transparent
--el-fill-color-dark #ebedf0 #39393A
--el-fill-color-darker #e6e8eb #424243
--el-fill-color-extra-light #fafcff #191919
--el-fill-color-light #f5f7fa #262727
--el-fill-color-lighter #fafafa #1D1D1D
--el-font-family "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif
--el-font-line-height-primary 24px 24px
--el-font-size-base 14px 14px
--el-font-size-extra-large 20px 20px
--el-font-size-extra-small 12px 12px
--el-font-size-large 18px 18px
--el-font-size-medium 16px 16px
--el-font-size-small 13px 13px
--el-font-weight-primary 500 500
--el-index-normal 1 1
--el-index-popper 2000 2000
--el-index-top 1000 1000
--el-loading-fullscreen-spinner-size 50px 50px
--el-loading-spinner-size 42px 42px
--el-mask-color rgba(255, 255, 255, .9) rgba(0, 0, 0, .8)
--el-mask-color-extra-light rgba(255, 255, 255, .3) rgba(0, 0, 0, .3)
--el-menu-active-color #409eff #409eff
--el-menu-base-level-padding 20px 20px
--el-menu-bg-color #ffffff transparent
--el-menu-border-color #dcdfe6 #4C4D4F
--el-menu-horizontal-height 60px 60px
--el-menu-horizontal-sub-item-height 36px 36px
--el-menu-hover-bg-color rgb(236, 245, 255) rgb(24, 34, 43)
--el-menu-hover-text-color #409eff #409eff
--el-menu-icon-width 24px 24px
--el-menu-item-font-size 14px 14px
--el-menu-item-height 56px 56px
--el-menu-item-hover-fill rgb(236, 245, 255) rgb(24, 34, 43)
--el-menu-level-padding 20px 20px
--el-menu-sub-item-height calc(56px - 6px) calc(56px - 6px)
--el-menu-text-color #303133 #E5EAF3
--el-overlay-color rgba(0, 0, 0, .8) rgba(0, 0, 0, .8)
--el-overlay-color-light rgba(0, 0, 0, .7) rgba(0, 0, 0, .7)
--el-overlay-color-lighter rgba(0, 0, 0, .5) rgba(0, 0, 0, .5)
--el-popup-modal-bg-color #000000 #000000
--el-popup-modal-opacity .5 .5
--el-svg-monochrome-grey #dcdfe6 #4C4D4F
--el-text-color-disabled #c0c4cc #6C6E72
--el-text-color-placeholder #a8abb2 #8D9095
--el-text-color-primary #303133 #E5EAF3
--el-text-color-regular #606266 #CFD3DC
--el-text-color-secondary #909399 #A3A6AD
--el-transition-all all .3s cubic-bezier(.645, .045, .355, 1) all .3s cubic-bezier(.645, .045, .355, 1)
--el-transition-border border-color .2s cubic-bezier(.645, .045, .355, 1) border-color .2s cubic-bezier(.645, .045, .355, 1)
--el-transition-box-shadow box-shadow .2s cubic-bezier(.645, .045, .355, 1) box-shadow .2s cubic-bezier(.645, .045, .355, 1)
--el-transition-color color .2s cubic-bezier(.645, .045, .355, 1) color .2s cubic-bezier(.645, .045, .355, 1)
--el-transition-duration .3s .3s
--el-transition-duration-fast .2s .2s
--el-transition-fade opacity .3s cubic-bezier(.23, 1, .32, 1) opacity .3s cubic-bezier(.23, 1, .32, 1)
--el-transition-fade-linear opacity .2s linear opacity .2s linear
--el-transition-function-ease-in-out-bezier cubic-bezier(.645, .045, .355, 1) cubic-bezier(.645, .045, .355, 1)
--el-transition-function-fast-bezier cubic-bezier(.23, 1, .32, 1) cubic-bezier(.23, 1, .32, 1)
--el-transition-md-fade transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1) transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1) 
1
2
// light length: 87
[{"name":"--el-bg-color","value":"#ffffff"},{"name":"--el-bg-color-overlay","value":"#ffffff"},{"name":"--el-bg-color-page","value":"#f2f3f5"},{"name":"--el-border","value":"1px solid #dcdfe6"},{"name":"--el-border-color","value":"#dcdfe6"},{"name":"--el-border-color-dark","value":"#d4d7de"},{"name":"--el-border-color-darker","value":"#cdd0d6"},{"name":"--el-border-color-extra-light","value":"#f2f6fc"},{"name":"--el-border-color-hover","value":"#c0c4cc"},{"name":"--el-border-color-light","value":"#e4e7ed"},{"name":"--el-border-color-lighter","value":"#ebeef5"},{"name":"--el-border-radius-base","value":"4px"},{"name":"--el-border-radius-circle","value":"100%"},{"name":"--el-border-radius-round","value":"20px"},{"name":"--el-border-radius-small","value":"2px"},{"name":"--el-border-style","value":"solid"},{"name":"--el-border-width","value":"1px"},{"name":"--el-box-shadow","value":"0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08)"},{"name":"--el-box-shadow-dark","value":"0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16)"},{"name":"--el-box-shadow-light","value":"0px 0px 12px rgba(0, 0, 0, .12)"},{"name":"--el-box-shadow-lighter","value":"0px 0px 6px rgba(0, 0, 0, .12)"},{"name":"--el-component-size","value":"32px"},{"name":"--el-component-size-large","value":"40px"},{"name":"--el-component-size-small","value":"24px"},{"name":"--el-disabled-bg-color","value":"#f5f7fa"},{"name":"--el-disabled-border-color","value":"#e4e7ed"},{"name":"--el-disabled-text-color","value":"#a8abb2"},{"name":"--el-fill-color","value":"#f0f2f5"},{"name":"--el-fill-color-blank","value":"#ffffff"},{"name":"--el-fill-color-dark","value":"#ebedf0"},{"name":"--el-fill-color-darker","value":"#e6e8eb"},{"name":"--el-fill-color-extra-light","value":"#fafcff"},{"name":"--el-fill-color-light","value":"#f5f7fa"},{"name":"--el-fill-color-lighter","value":"#fafafa"},{"name":"--el-font-family","value":"\\"Helvetica Neue\\", Helvetica, \\"PingFang SC\\", \\"Hiragino Sans GB\\", \\"Microsoft YaHei\\", \\"微软雅黑\\", Arial, sans-serif"},{"name":"--el-font-line-height-primary","value":"24px"},{"name":"--el-font-size-base","value":"14px"},{"name":"--el-font-size-extra-large","value":"20px"},{"name":"--el-font-size-extra-small","value":"12px"},{"name":"--el-font-size-large","value":"18px"},{"name":"--el-font-size-medium","value":"16px"},{"name":"--el-font-size-small","value":"13px"},{"name":"--el-font-weight-primary","value":"500"},{"name":"--el-index-normal","value":"1"},{"name":"--el-index-popper","value":"2000"},{"name":"--el-index-top","value":"1000"},{"name":"--el-loading-fullscreen-spinner-size","value":"50px"},{"name":"--el-loading-spinner-size","value":"42px"},{"name":"--el-mask-color","value":"rgba(255, 255, 255, .9)"},{"name":"--el-mask-color-extra-light","value":"rgba(255, 255, 255, .3)"},{"name":"--el-menu-active-color","value":"#409eff"},{"name":"--el-menu-base-level-padding","value":"20px"},{"name":"--el-menu-bg-color","value":"#ffffff"},{"name":"--el-menu-border-color","value":"#dcdfe6"},{"name":"--el-menu-horizontal-height","value":"60px"},{"name":"--el-menu-horizontal-sub-item-height","value":"36px"},{"name":"--el-menu-hover-bg-color","value":"rgb(236, 245, 255)"},{"name":"--el-menu-hover-text-color","value":"#409eff"},{"name":"--el-menu-icon-width","value":"24px"},{"name":"--el-menu-item-font-size","value":"14px"},{"name":"--el-menu-item-height","value":"56px"},{"name":"--el-menu-item-hover-fill","value":"rgb(236, 245, 255)"},{"name":"--el-menu-level-padding","value":"20px"},{"name":"--el-menu-sub-item-height","value":"calc(56px - 6px)"},{"name":"--el-menu-text-color","value":"#303133"},{"name":"--el-overlay-color","value":"rgba(0, 0, 0, .8)"},{"name":"--el-overlay-color-light","value":"rgba(0, 0, 0, .7)"},{"name":"--el-overlay-color-lighter","value":"rgba(0, 0, 0, .5)"},{"name":"--el-popup-modal-bg-color","value":"#000000"},{"name":"--el-popup-modal-opacity","value":".5"},{"name":"--el-svg-monochrome-grey","value":"#dcdfe6"},{"name":"--el-text-color-disabled","value":"#c0c4cc"},{"name":"--el-text-color-placeholder","value":"#a8abb2"},{"name":"--el-text-color-primary","value":"#303133"},{"name":"--el-text-color-regular","value":"#606266"},{"name":"--el-text-color-secondary","value":"#909399"},{"name":"--el-transition-all","value":"all .3s cubic-bezier(.645, .045, .355, 1)"},{"name":"--el-transition-border","value":"border-color .2s cubic-bezier(.645, .045, .355, 1)"},{"name":"--el-transition-box-shadow","value":"box-shadow .2s cubic-bezier(.645, .045, .355, 1)"},{"name":"--el-transition-color","value":"color .2s cubic-bezier(.645, .045, .355, 1)"},{"name":"--el-transition-duration","value":".3s"},{"name":"--el-transition-duration-fast","value":".2s"},{"name":"--el-transition-fade","value":"opacity .3s cubic-bezier(.23, 1, .32, 1)"},{"name":"--el-transition-fade-linear","value":"opacity .2s linear"},{"name":"--el-transition-function-ease-in-out-bezier","value":"cubic-bezier(.645, .045, .355, 1)"},{"name":"--el-transition-function-fast-bezier","value":"cubic-bezier(.23, 1, .32, 1)"},{"name":"--el-transition-md-fade","value":"transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1)"}]
1
2
// dark length: 87
[{"name":"--el-bg-color","value":"#141414"},{"name":"--el-bg-color-overlay","value":"#1d1e1f"},{"name":"--el-bg-color-page","value":"#0a0a0a"},{"name":"--el-border","value":"1px solid #4C4D4F"},{"name":"--el-border-color","value":"#4C4D4F"},{"name":"--el-border-color-dark","value":"#58585B"},{"name":"--el-border-color-darker","value":"#636466"},{"name":"--el-border-color-extra-light","value":"#2B2B2C"},{"name":"--el-border-color-hover","value":"#6C6E72"},{"name":"--el-border-color-light","value":"#414243"},{"name":"--el-border-color-lighter","value":"#363637"},{"name":"--el-border-radius-base","value":"4px"},{"name":"--el-border-radius-circle","value":"100%"},{"name":"--el-border-radius-round","value":"20px"},{"name":"--el-border-radius-small","value":"2px"},{"name":"--el-border-style","value":"solid"},{"name":"--el-border-width","value":"1px"},{"name":"--el-box-shadow","value":"0px 12px 32px 4px rgba(0, 0, 0, .36), 0px 8px 20px rgba(0, 0, 0, .72)"},{"name":"--el-box-shadow-dark","value":"0px 16px 48px 16px rgba(0, 0, 0, .72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000"},{"name":"--el-box-shadow-light","value":"0px 0px 12px rgba(0, 0, 0, .72)"},{"name":"--el-box-shadow-lighter","value":"0px 0px 6px rgba(0, 0, 0, .72)"},{"name":"--el-component-size","value":"32px"},{"name":"--el-component-size-large","value":"40px"},{"name":"--el-component-size-small","value":"24px"},{"name":"--el-disabled-bg-color","value":"#262727"},{"name":"--el-disabled-border-color","value":"#414243"},{"name":"--el-disabled-text-color","value":"#8D9095"},{"name":"--el-fill-color","value":"#303030"},{"name":"--el-fill-color-blank","value":"transparent"},{"name":"--el-fill-color-dark","value":"#39393A"},{"name":"--el-fill-color-darker","value":"#424243"},{"name":"--el-fill-color-extra-light","value":"#191919"},{"name":"--el-fill-color-light","value":"#262727"},{"name":"--el-fill-color-lighter","value":"#1D1D1D"},{"name":"--el-font-family","value":"\\"Helvetica Neue\\", Helvetica, \\"PingFang SC\\", \\"Hiragino Sans GB\\", \\"Microsoft YaHei\\", \\"微软雅黑\\", Arial, sans-serif"},{"name":"--el-font-line-height-primary","value":"24px"},{"name":"--el-font-size-base","value":"14px"},{"name":"--el-font-size-extra-large","value":"20px"},{"name":"--el-font-size-extra-small","value":"12px"},{"name":"--el-font-size-large","value":"18px"},{"name":"--el-font-size-medium","value":"16px"},{"name":"--el-font-size-small","value":"13px"},{"name":"--el-font-weight-primary","value":"500"},{"name":"--el-index-normal","value":"1"},{"name":"--el-index-popper","value":"2000"},{"name":"--el-index-top","value":"1000"},{"name":"--el-loading-fullscreen-spinner-size","value":"50px"},{"name":"--el-loading-spinner-size","value":"42px"},{"name":"--el-mask-color","value":"rgba(0, 0, 0, .8)"},{"name":"--el-mask-color-extra-light","value":"rgba(0, 0, 0, .3)"},{"name":"--el-menu-active-color","value":"#409eff"},{"name":"--el-menu-base-level-padding","value":"20px"},{"name":"--el-menu-bg-color","value":"transparent"},{"name":"--el-menu-border-color","value":"#4C4D4F"},{"name":"--el-menu-horizontal-height","value":"60px"},{"name":"--el-menu-horizontal-sub-item-height","value":"36px"},{"name":"--el-menu-hover-bg-color","value":"rgb(24, 34, 43)"},{"name":"--el-menu-hover-text-color","value":"#409eff"},{"name":"--el-menu-icon-width","value":"24px"},{"name":"--el-menu-item-font-size","value":"14px"},{"name":"--el-menu-item-height","value":"56px"},{"name":"--el-menu-item-hover-fill","value":"rgb(24, 34, 43)"},{"name":"--el-menu-level-padding","value":"20px"},{"name":"--el-menu-sub-item-height","value":"calc(56px - 6px)"},{"name":"--el-menu-text-color","value":"#E5EAF3"},{"name":"--el-overlay-color","value":"rgba(0, 0, 0, .8)"},{"name":"--el-overlay-color-light","value":"rgba(0, 0, 0, .7)"},{"name":"--el-overlay-color-lighter","value":"rgba(0, 0, 0, .5)"},{"name":"--el-popup-modal-bg-color","value":"#000000"},{"name":"--el-popup-modal-opacity","value":".5"},{"name":"--el-svg-monochrome-grey","value":"#4C4D4F"},{"name":"--el-text-color-disabled","value":"#6C6E72"},{"name":"--el-text-color-placeholder","value":"#8D9095"},{"name":"--el-text-color-primary","value":"#E5EAF3"},{"name":"--el-text-color-regular","value":"#CFD3DC"},{"name":"--el-text-color-secondary","value":"#A3A6AD"},{"name":"--el-transition-all","value":"all .3s cubic-bezier(.645, .045, .355, 1)"},{"name":"--el-transition-border","value":"border-color .2s cubic-bezier(.645, .045, .355, 1)"},{"name":"--el-transition-box-shadow","value":"box-shadow .2s cubic-bezier(.645, .045, .355, 1)"},{"name":"--el-transition-color","value":"color .2s cubic-bezier(.645, .045, .355, 1)"},{"name":"--el-transition-duration","value":".3s"},{"name":"--el-transition-duration-fast","value":".2s"},{"name":"--el-transition-fade","value":"opacity .3s cubic-bezier(.23, 1, .32, 1)"},{"name":"--el-transition-fade-linear","value":"opacity .2s linear"},{"name":"--el-transition-function-ease-in-out-bezier","value":"cubic-bezier(.645, .045, .355, 1)"},{"name":"--el-transition-function-fast-bezier","value":"cubic-bezier(.23, 1, .32, 1)"},{"name":"--el-transition-md-fade","value":"transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1)"}]

后记

摘抄一下 Markdown格式进阶之表格：合并单元格、颜色修改以及其他

如何在Markdown里面画这样的表格：
普通表头 斜体表头而且居右 表头横向合并单元格 限制列宽为80px超出会自动换行
左边也可以有表头 涂个颜色 高亮文本但不全高亮 有时候加粗有时候斜体 20px小于80px服从80px列宽命令无效
表头不一定是一整行或者一整列的 纵向合并单元格要注意
下一行少一个单元格
字太多必要时我会换行		 单元格也可以从两个方向合并 百分比和像素是可以混用的具体服从哪个取决于哪个大
简单做个居左 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table>
<capital>如何在Markdown里面画这样的表格：</capital>
<tr>
<th>普通表头</th>
<th align="right"><i>斜体表头而且居右</th>
<th colspan=2>表头横向合并单元格</th>
<td width="80px">限制列宽为80px超出会自动换行</td>
</tr>
<tr>
<th>左边也可以有表头</th>
<td bgcolor=#ffffcc>涂个颜色</td>
<td><mark>高亮文本</mark>但不全高亮</td>
<td><b>有时候加粗</b><i>有时候斜体</i></td>
<td width="20px">20px小于80px服从80px列宽命令无效</td>
</tr>
<tr>
<td>表头不一定是一整行或者一整列的</td>
<td rowspan=2>纵向合并单元格要注意<br>下一行少一个单元格<br>字太多必要时我会换行</td>
<td rowspan=2 colspan=2>单元格也可以从两个方向合并</td>
<td rowspan=2 width="10%">百分比和像素是可以混用的具体服从哪个取决于哪个大</td>
</tr>
<td align="left"> 简单做个居左 </td>
</tr>
</table>