跳转到内容

Borders 边框

使用边框的辅助功能,您能够快速设置元素的边框和边框圆角(border-radius)的样式。 这非常适合图像,按钮或任何其他元素。

边框

Use border utilities to add or remove an element's borders. 选择所有边框或一次选择一个。 选择所有边框或一次选择一个。

添加

<Box sx={{ border: 1 }}><Box sx={{ borderTop: 1 }}><Box sx={{ borderRight: 1 }}><Box sx={{ border: 1 }}><Box border={0}><Box sx={{ borderTop: 1 }}><Box borderRight={0}><Box borderBottom={0}><Box borderLeft={0}><Box sx={{ borderRight: 1 }}><Box sx={{ borderBottom: 1 }}><Box sx={{ borderLeft: 1 }}><Box sx={{ borderTop: 1 }}><Box sx={{ borderRight: 1 }}><Box sx={{ borderBottom: 1 }}><Box sx={{ borderLeft: 1 }}><Box sx={{ borderLeft: 1 }}>

相减

<Box sx={{ border: 0 }}><Box sx={{ border: 0 }}><Box sx={{ borderTop: 0 }}><Box sx={{ borderRight: 0 }}><Box sx={{ borderBottom: 0 }}><Box sx={{ borderLeft: 0 }}><Box sx={{ borderRight: 0 }}><Box sx={{ borderBottom: 0 }}><Box sx={{ borderLeft: 0 }}>

边框颜色

<Box sx={{ borderColor: 'primary.main' }}><Box sx={{ borderColor: 'secondary.main' }}><Box sx={{ borderColor: 'error.main' }}><Box sx={{ borderColor: 'grey.500' }}><Box sx={{ borderColor: 'text.primary' }}><Box sx={{ borderColor: 'secondary.main' }}><Box sx={{ borderColor: 'error.main' }}><Box sx={{ borderColor: 'grey.500' }}><Box sx={{ borderColor: 'text.primary' }}>

Border-radius

<Box sx={{ borderRadius: '50%' }}><Box sx={{ borderRadius: 1 }}><Box sx={{ borderRadius: '50%' }}><Box borderRadius="borderRadius"><Box borderRadius={16}><Box borderRadius="borderRadius"><Box borderRadius={16}><Box sx={{ borderRadius: 1 }}>// theme.shape.borderRadius * 1
<Box sx={{ borderRadius: 16 }}><Box sx={{ borderRadius: 1 }}><Box sx={{ borderRadius: '50%' }}><Box borderRadius="borderRadius"><Box borderRadius={16}><Box borderRadius="borderRadius"><Box borderRadius={16}><Box sx={{ borderRadius: 1 }}>// theme.shape.borderRadius * 1
<Box sx={{ borderRadius: 16 }}>

API

import { borders } from '@material-ui/system';
导入名称 属性 CSS 属性 Theme key
border border border borders
borderTop borderTop border-top borders
borderLeft borderLeft border-left borders
borderRight borderRight border-right borders
borderBottom borderBottom border-bottom borders
borderColor borderColor border-color palette
borderTopColor borderTopColor border-top-color palette
borderRightColor borderRightColor border-right-color palette
borderBottomColor borderBottomColor border-bottom-color palette
borderLeftColor borderLeftColor border-left-color palette
borderRadius borderRadius border-radius shape