CSS知识总结（五）
CSS常用樣式
?
3.邊框樣式
1）邊框線
border-style : none | hidden | dotted | dashed | solid | double | groove |?ridge | inset | outset
常用的邊框線：dotted（點狀）、dashed（虛線）、solid（實線）、double（雙實線）
border-top-style 設置上邊框線
border-bottom-style 設置下邊框線
border-left-style 設置左邊框線
border-right-style ?設置右邊框線
例子：
/* CSS代碼 */ .style{width:100px;height:100px;border-top-style:dotted;border-bottom-style:dashed;border-left-style:solid;border-right-style:double; } <!-- HTML代碼 --> <body><div class="style"></div> </body>效果：
?
? 2）邊框寬度
border-width : thin | medium?| thick | length?
? thin（細邊框）、medium（中等邊框）、thick（粗邊框）、length（數值px）
border-top-width 設置上邊框寬度
border-bottom-width 設置下邊框寬度
border-left-width 設置左邊框寬度
border-right-width ?設置右邊框寬度
? 例子：
/* CSS代碼 */ .width{width:100px;height:100px;border-style:solid;border-top-width:thin;border-bottom-width:medium;border-left-width:thick;border-right-width:10px; } <!-- HTML代碼 --> <body><div class="width"></div> </body>效果：
?
3）邊框顏色
border-color: color
color取值：英文單詞、十六進制、RGB
border-top-color 設置上邊框顏色
border-bottom-color 設置下邊框顏色
border-left-color 設置左邊框顏色
border-right-color ?設置右邊框顏色
例子：
/* CSS代碼 */ .color{width:100px;height:100px;border-style:solid;border-color:5px;border-top-color:yellow;border-bottom-color:green;border-left-color:#f00000;border-right-color:rgb(0,0,0); } <!-- HTML代碼 --> <body><div class="color"></div> </body>效果：
?
4）邊框樣式縮寫
border?: border-width ?border-style ?border-color
例子：
div { width:100px; height:100px;border-width:1px; border-style:solid; border-color:#FF0000; }縮寫后：
div {width:100px; height:100px; border:1px solid #FF0000; }?
5）圓角效果
border-radius: length | percentage
向元素添加圓角表框。有一下幾種情況：
1、所有角都使用半徑為10px的圓角
div{ border-radius:10px;}?
?2、四個半徑值分別是左上角、右上角、右下角和左下角，順時針方向
div{ border-radius: 10px 20px 30px 40px; }
? 3、設置每個角的水平半徑和垂直半徑,用斜杠隔開
div{?border-radius:40px/20px; }
? 4、圓形
div{ border-radius:50% }
6）邊框圖片
border-image
邊框樣式使用圖像來填充
設置了border-image后，border-style則不顯示
?
7）盒子陰影
box-shadow: none | shadow
box-shadow: 水平偏移量 垂直偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
其中，水平和垂直的偏移量必寫，其它各自展示不同的效果。
?
1、外陰影常規效果：
/* CSS代碼 */ .outset{width:100px;height:100px;background:#000;box-shadow:5px 5px #ccc; } <!-- HTML代碼 --> <body><div class="outset"></div> </body>?
2、外陰影模糊效果：
/* CSS代碼 */ .outset-blur{width:100px;height:100px;background:#000;box-shadow:5px 5px 10px #000; } <!-- HTML代碼 --> <body><div class="outset-blur"></div> </body>?
? 3、外陰影模糊外延效果：
/* CSS代碼 */ .outset-extension{width:100px;height:100px;background:#000;box-shadow:5px 5px 10px 10px #f00; } <!-- HTML代碼 --> <body><div class="outset-extension"></div> </body>?
? 4、內陰影常規效果：
/* CSS代碼 */ .inset{width:100px;height:100px;background:#ccc;box-shadow:5px 5px #000 inset; } <!-- HTML代碼 --> <body><div class="inset"></div> </body>?
? 5、內陰影模糊效果：
/* CSS代碼 */ .inset-blur{width:100px;height:100px;background:#ccc;box-shadow:5px 5px 10px #000 inset; } <!-- HTML代碼 --> <body><div class="inset-blur"></div> </body>?
? *在下一篇博文中，會說到關于邊框樣式和盒子陰影應用到網頁中的效果。
?
?
?
轉載于:https://www.cnblogs.com/mossbaoo/p/5764464.html
總結
以上是生活随笔為你收集整理的CSS知识总结（五）的全部內容，希望文章能夠幫你解決所遇到的問題。
