如何用html制作边框效果,如何替 HTML DIV 区块增加边框效果

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

HTML DIV 区块除了可以当容器使用或用来做网页排版之外，本身也可以透过增加边框效果来美化视觉效果，在这里我们要用到的是 CSS 的边框设计技巧，也就是 border 属性，透过 border 属性可以很轻易的替 HTML 的 DIV 区块增加四个边框，甚至分别替上边框、右边框、下边框或左边框设计不同的风格效果都可以轻松做到，先来看看 border 属性的基本语法再套用到范例看效果。

CSS border 边框属性基本语法

border: 边框宽度 边框颜色 边框模式;

基本的 border 属性可以透过边框的宽度、颜色以及模式来设计不同的视觉效果，这几个参数的设计范例请参阅以下内容CSS border 边框设计

CSS border-width 元素边框粗细

CSS border-style 边框模式设计

CSS border-color 边框颜色设计

如果你对以上的 borde 属性非常了解，可以直接看范例的套用效果

替 HTML DIV 区块增加边框效果范例

红色的实线边框

蓝色的虚线边框

橘色的粗实线边框

范例的呈现效果

红色的实线边框

蓝色的虚线边框

橘色的粗实线边框

从范例的三个不同边框模式可以看到，透过 CSS border 属性可以很轻易的替 HTML DIV 区块设计出不同风格的边框效果，无论是颜色、粗细还是边框要实现或虚线都可以很轻易的做出来，各位自己尝试看看。

boniuav的牛爱网