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)