border-style、border-width 和 border-color 可单独或组合设置边框；2. 推荐使用简写属性 border: width style color，其中 style 必不可少；3. 可分别设置四条边的样式，每边可不同；4. 省略 style 则无边框，省略 width 使用默认值，省略 color 则取文本颜色。
在CSS中，border-style、border-width 和 border-color 是定义边框的三个基本属性。它们可以分别设置，也可以组合使用来更高效地定义元素边框。
单独设置边框属性
你可以分别为边框设置样式、宽度和颜色：
div { border-width: 2px; border-style: solid; border-color: #0000ff;}
这样会为 div 元素的所有四条边添加一个 2px 宽、实线、蓝色的边框。
组合使用 border 简写属性
更常见和推荐的方式是使用简写的 border 属性，将 style、width 和 color 合并成一行：
立即学习“前端免费学习笔记（深入）”；
div { border: 2px solid #0000ff;}
顺序可以是任意的，但通常推荐按 width style color 书写，这是最易读的习惯。
Word-As-Image for Semantic Typography
文字变形艺术字、文字变形象形字
62 查看详情 
注意：其中 border-style 是必需的。如果省略，边框不会显示，因为默认样式是 none。
分别设置四条边
你也可以对上、右、下、左四条边分别设置：
div { border-top: 1px dashed red; border-right: 2px solid green; border-bottom: 3px double blue; border-left: 4px dotted black;}
每条边都可以拥有不同的 width、style 和 color。
使用 border 简写时的注意事项
只要不写 border-style，边框就不会出现，即使设置了 width 和 color。 如果省略 border-width，浏览器会使用默认值（通常是 medium，约 1-3px）。 如果省略 border-color，则使用当前文本颜色（color 属性的值）。
基本上就这些。掌握这三个属性的独立与组合用法，就能灵活控制任何元素的边框样式。
以上就是css border-style、border-width、border-color如何组合使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1027561.html
微信扫一扫 
支付宝扫一扫 
