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

CodeYarn發表於2022-04-17

一、屬性描述

屬性 描述
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 可選。陰影的顏色。

相關文章