CSS的border属性可设置元素边框样式，包含宽度、样式和颜色三部分，如border: 2px solid #000；常用样式有solid、dashed、dotted等；可单独设置四边如border-top；支持不同颜色、宽度和样式组合；配合border-radius可实现圆角效果。
使用 CSS 的 border 属性可以轻松为元素设置不同样式的边框。你可以分别控制边框的样式、宽度、颜色，甚至为每条边（上、右、下、左）设置不同的效果。
1. 基本 border 语法
border 属性是一个简写属性，包含三个部分：宽度、样式和颜色。
border: [宽度] [样式] [颜色];
例如：
border: 2px solid #000;
这会创建一个 2 像素宽、实线、黑色的边框。
立即学习“前端免费学习笔记（深入）”；
2. 常见的 border-style 可选值
边框样式由 border-style 决定，以下是一些常用值：
solid：实线边框 dashed：虚线边框 dotted：点状边框 double：双线边框 groove：3D 凹槽边框 ridge：3D 脊状边框 inset：3D 内嵌边框 outset：3D 外凸边框 none 或 hidden：无边框
示例：
border: 3px dashed red;border: 4px double #ccc;
3. 分别设置四条边
可以单独设置上、右、下、左四个方向的边框：
border-top border-right border-bottom border-left
例如，只给顶部加一条红色实线：
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情 
border-top: 3px solid red;
其他边不显示边框。
也可以组合不同样式：
border-top: 2px solid blue;
border-right: 3px dashed green;
border-bottom: 2px solid blue;
border-left: 3px dashed green;
4. 设置单一边框的颜色或样式
除了整体设置，还可以单独修改某一边的颜色或样式：
border-color：设置四边颜色 border-width：设置四边宽度 border-style：设置四边样式（可分别指定）
比如让四边样式不同：
border-style: solid dashed dotted double;
顺序对应：上、右、下、左。
5. 圆角边框（配合 border-radius）
如果想让带边框的元素有圆角，使用 border-radius：
border: 2px solid #000;
border-radius: 10px;
这样边框会变成圆角形状。
基本上就这些。通过灵活组合 border 的样式、颜色和方向控制，你可以实现各种视觉效果，从简单分割线到复杂的装饰性边框都能搞定。
以上就是如何用css border设置不同样式边框的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1075728.html
微信扫一扫 
支付宝扫一扫 
