css-邊框屬性
一、css邊框屬性
1.border屬性
(1)border:複合屬性,設定物件邊框的特性, 如使用該複合屬性定義其單個引數,則其他引數的預設值將無條件覆蓋各自對應的單個屬性設定
(2)例如:border:1px solid red;
設定或檢索物件邊框寬度
設定或檢索物件邊框樣式
設定或檢索物件邊框顏色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css 邊框屬性</title> <style type="text/css"> div,span{ width: 200px; height: 200px; background-color: red; border:2px solid green;<!-- 線的粗細、形狀、顏色 --> } </style> </head> <body> <div> 這是一個塊元素 </div><br> <span> 這是一個行元素 </span> </body> </html>
2.border-color屬性
(1)border-color: 設定或檢索物件的邊框顏色。
①如果提供全部四個引數值,將按上、右、下、左的順序作用於四邊。
②如果只提供一個,將用於全部的四邊。
③如果提供兩個,第一個用於上、下,第二個用於左、右。
④如果提供三個,第一個用於上,第二個用於左、右,第三個用於下。
3.border-style屬性
(1)border-style:設定或檢索物件的邊框樣式。
①如果提供全部四個引數值,將按上、右、下、左的順序作用於四邊。
②如果只提供一個,將用於全部的四邊。
③如果提供兩個,第一個用於上、下,第二個用於左、右。
④如果提供三個,第一個用於上,第二個用於左、右,第三個用於下。
(2)取值:
dotted:點狀輪廓。
dashed:虛線輪廓。
solid:實線輪廓。
double:雙線輪廓。兩條單線與其間隔的和等於指定的border-width值
groove:3D凹槽輪廓。
ridge:3D凸槽輪廓。
inset:3D凹邊輪廓。
outset:3D凸邊輪廓
4.border-width屬性
(1)border-width:設定或檢索物件的邊框寬度
①如果提供全部四個引數值,將按上、右、下、左的順序作用於四邊。
②如果只提供一個,將用於全部的四邊。
③如果提供兩個,第一個用於上、下,第二個用於左、右。
④如果提供三個,第一個用於上,第二個用於左、右,第三個用於下。
5.border-radius屬性
(1) border-radius:設定或檢索物件使用圓角邊框。