border-width和border-style需配合使用，因默认样式为none，仅设宽度不显示边框。1. border-width用thin、medium、thick或具体数值设置粗细；2. border-style设solid、dashed等样式决定边框类型；3. 二者与color结合可用border简写，如“2px dashed red”。
在CSS中，border-width 和 border-style 是用来定义元素边框外观的重要属性。它们需要配合使用才能让边框显示出来，因为默认的边框样式是“none”，即使设置了宽度也不会可见。
border-width 设置边框粗细
该属性用于设置边框的宽度，可以使用预定义关键字或具体长度值。
常用取值方式：thin：细边框（通常为1px）medium：中等边框（默认值，通常为3px）thick：粗边框（通常为4px）具体数值：如 1px、2em、0.5rem 等，推荐使用像素单位
示例：
/* 四边统一 */border-width: 2px;/ 分别设置四边 /border-width: 1px 2px 3px 4px; / 上 右 下 左 /
/ 上下、左右 /border-width: 1px 3px; / 上下为1px，左右为3px /
border-style 设置边框样式
这个属性决定边框的线条类型，是实现不同视觉效果的关键。
立即学习“前端免费学习笔记（深入）”；
Seede AI
AI 驱动的设计工具
586 查看详情 常见取值：solid：实线（最常用）dashed：虚线dotted：点线double：双线groove、ridge、inset、outset：3D效果边框none：无边框（默认）hidden：隐藏边框（与 none 类似，但在表格中处理不同）
示例：
/* 所有边为虚线 */border-style: dashed;/ 上边实线，其他为点线 /border-style: solid dotted;
组合使用 width 和 style
单独设置 width 或 style 可能不会生效，必须确保 style 不为 none。
正确写法示例：
div { border-width: 3px; border-style: solid; border-color: #000; /* 颜色也要设置才会完整显示 */}
也可以用简写属性 border：
/* 简写格式：width style color */div { border: 2px dashed red;}
基本上就这些。只要记住：没有 border-style，再大的 border-width 也看不见。
以上就是cssborder-width和border-style属性设置方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1072324.html
微信扫一扫 
支付宝扫一扫 
