邊框(Border) 和 輪廓(Outline) 屬性

一、屬性描述

屬性	描述
border	復合屬性。設置對象邊框的特性。
outline	復合屬性。設置或檢索對象外的線條輪廓。
border-radius	設置或檢索對象使用圓角邊框。
border-image	設置或檢索對象的邊框樣式使用圖像來填充。
box-shadow	向方框添加一個或多個陰影。

 

二、屬性詳解

1、border 指定元素邊框的樣式、寬度和顏色:

p {
    border:1px solid red;
}

值	說明
border-width	指定邊框的寬度
border-style	指定邊框的樣式，solid(實線邊框)，dotted(虛線邊框)
border-color	指定邊框的顏色

附加：我們的邊框有四個邊，如果直接使用 border 屬性，就默認四個邊框一起設置，如果想要對邊框四個邊進行單獨設置，可以這樣做（這里以底部邊框為例）：

p {
    border-bottom:5px solid blue;
}

border-bottom-width	設置或檢索對象的底部邊框寬度。
border-bottom-style	設置或檢索對象的底部邊框樣式。
borde-bottomr-color	設置或檢索對象的底部邊框顏色。

同理，如果想要對頂部邊框、右邊框、左邊框進行單獨設置，只需要把 bottom 換為 top、right、left 即可

 

2、border-radius 為邊框添加圓角，這里一定要先設置邊框才能使用圓角屬性

div {
  border: 2px solid red;
  border-radius: 25px;
}

值	描述
length	定義彎道的形狀。
%	使用%定義角落的形狀。

與 border 同理，也可以對單個圓角進行設置

border-radius: 5px;

/* 等價於： */

border-top-left-radius: 5px;    /*左上角圓角*/
border-top-right-radius: 5px;    /*右上角圓角*/
border-bottom-right-radius: 5px;    /*右下角圓角*/
border-bottom-left-radius: 5px;    /*左下角圓角*/

 

3、border-image-* 屬性一般用來構可擴展按鈕

值	描述
border-image-source	用於指定要用於繪制邊框的圖像的位置
border-image-slice	圖像邊界向內偏移
border-image-width	圖像邊界的寬度
border-image-outset	用於指定在邊框外部繪制 border-image-area 的量
border-image-repeat	用於設置圖像邊界是否應重復（repeat）、拉伸（stretch）或鋪滿（round）。

 

4、box-shadow 設置一個或多個下拉陰影的框

div
{
    box-shadow: 8px 8px 5px #000;
}

值	說明
h-shadow	必需的。水平陰影的位置。允許負值
v-shadow	必需的。垂直陰影的位置。允許負值
blur	可選。模糊距離
spread	可選。陰影的大小
color	可選。陰影的顏色。