1. 程式人生 > >css-邊框屬性

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:設定或檢索物件使用圓角邊框。