Logo Windi CSS

边框

边框圆角

用于控制元素边框圆角半径的工具类。

none
sm
default
md
lg
xl
2xl
3xl
4xl
1/2
full
CSS
interpret
 Customizing 
windi.config.js
export default {
  theme: {
    borderRadius: {
      none: '0',
      sm: '0.125rem',
      DEFAULT: '4px',
      md: '0.375rem',
      lg: '0.5rem',
      full: '9999px',
      large: '12px',
    },
  },
}

边框宽度 
用于控制元素边框宽度的工具类。
default
0
1
2
3
4
5
CSS
interpret
 Customizing 
windi.config.js
export default {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      none: '0',
      sm: '2px',
    },
  },
}

边框颜色 
用于控制元素边框颜色的工具类。
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
你可以通过编辑 windi.config.js 文件 theme.colors 的部分来自定义调色板，或仅使用 theme.borderColor 部分自定义边框颜色。
windi.config.js
export default {
  theme: {
    borderColor: theme => ({
      ...theme('colors'),
      DEFAULT: theme('colors.gray.300', 'currentColor'),
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    }),
  },
}

边框不透明度 
用于控制元素边框颜色不透明度的工具类。
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      borderOpacity: {
        light: '0.1',
      },
    },
  },
}

边框样式 
用于控制元素边框样式的工具类。
solid
dashed
dotted
double
none
CSS
分割线宽度 
用于控制元素之间分割线宽度的工具类。
纵向分割线 
default
reverse
2
4
6
8
10
12
14
16
18
20
CSS
分割横向 
default
reverse
2
4
6
8
10
12
14
16
18
20
CSS
 Customizing 
分割线宽度大小默认继承了 borderWidth 的大小，所以如果你希望同时自定义边框宽度和分割线宽度的值，修改 windi.config.js 文件中 theme.borderWidth 部分。
windi.config.js
export default {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
  },
}

如果仅需要自定义分割线的宽度值，修改 windi.config.js 文件中 theme.divideWidth 部分。
windi.config.js
export default {
  theme: {
    divideWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
  },
}

分割线颜色 
用于控制元素之间分割线颜色的工具类。
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    divideColor: theme => ({
      ...theme('borderColors'),
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    }),
  },
}

分割线不透明度 
用于控制元素之间分割线不透明度的工具类。
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      divideOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

分割线样式 
用于控制元素之间分割线样式的工具类。
solid
dashed
dotted
double
none
CSS
轮廓环宽度 
用于创建带有 box-shadows 的轮廓环工具类。
default
inset
0
1
2
4
6
8
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      ringWidth: {
        DEFAULT: '2px',
        6: '6px',
        10: '10px',
      },
    },
  },
}

轮廓环颜色 
用于设置轮廓环颜色的工具类。
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
windi.config.js
const colors = require('windicss/colors')

export default {
  theme: {
    ringColor: {
      white: colors.white,
      pink: colors.fuchsia,
    },
  },
}

轮廓环不透明度 
用于设置轮廓环不透明度的工具类。
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      ringOpacity: {
        15: '0.15',
        35: '0.35',
        65: '0.65',
      },
    },
  },
}

轮廓环偏移宽度 
用于添加轮廓环时, 模拟偏移的工具类。
0
1
2
4
6
8
10
12
14
16
20
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      ringOffsetWidth: {
        3: '3px',
        6: '6px',
        10: '10px',
      },
    },
  },
}

轮廓环偏移颜色 
用于设置轮廓环偏移颜色的工具类。
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
 Customizing 
windi.config.js
const colors = require('windicss/colors')

export default {
  theme: {
    ringOffsetColor: {
      white: colors.white,
      pink: colors.fuchsia,
    },
  },
}