border-style · 跟老司机学CSS3

**border-style** * 描述：设置对象边框的样式。 * 版本：CSS1 * 继承性：无 **语法** ``` border-style: 样式值; ``` 样式值 * none：无轮廓。border-color 将被忽略，border-width 计算值为 0，除非边框轮廓为图像，即：border-image。 * hidden：隐藏边框。 * dotted：点状轮廓。 * dashed：虚线轮廓。 * solid：实线轮廓 * double：双线轮廓。两条单线与其间隔的和等于指定的border-width值 * groove：3D凹槽轮廓。 * ridge：3D凸槽轮廓。 * inset：3D凹边轮廓。 * outset：3D凸边轮廓。 **使用说明** 提供全部四个参数值，将按上、右、下、左的顺序作用于四边。提供三个参数值，第一个用于上，第二个用于左、右，第三个用于下。提供两个参数值，第一个用于上、下，第二个用于左、右。如果只提供一个，将用于全部的四边。如果 border-width 等于 0，该属性无效。 **代码示例** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-style</title> <style> #container{ width: 50px; height: 50px; border-width: 5px; border-style: dotted dashed double solid; } </style> </head> <body> <div id="container"> </div> </body> </html> ``` ![border-style](https://box.kancloud.cn/5972e035df7a40086a5848bc45265bf8_80x77.png)