【Web前端HTML5&CSS3】08-盒模型補充

筆記來源：尚矽谷Web前端HTML5&CSS3初學者零基礎入門全套完整版

目錄

• 盒模型補充
  • 1. 盒子大小
  • 2. 輪廓
  • 3. 陰影
  • 4. 圓角
    • 圓
    • 橢圓

盒模型補充

1. 盒子大小

預設情況下，盒子可見框的大小由內容區、內邊距和邊框共同決定

box-sizing用來設定盒子尺寸的計算方式（設定width和height的作用）

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 10px red solid;
    /* box-sizing: content-box; */
    box-sizing: border-box;
}

可選值：

• content-box 預設值，寬度和高度用來設定內容區的大小

  

• border-box 寬度和高度用來設定整個盒子可見框的大小

  

width和height指的是內容區、內邊距和邊框的總大小

2. 輪廓

outline用來設定元素的輪廓線，用法和border一模一樣

輪廓和邊框不同點是，輪廓不會影響到可見框的大小

邊框

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 10px red solid;
}

輪廓

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    outline: 10px red solid;
}

可以很明顯看到outline與border的區別

我們一般不會直接這麼設定輪廓，而是下面這種場景

.box:hover {
    outline: 10px red solid;
}

從上面的動態圖也可以很清晰地看出，outline屬性並沒有改變盒子的佈局

3. 陰影

box-shadow屬性用於在一個元素的框架周圍新增陰影效果

你可以設定多個由逗號分隔的效果

一個盒狀陰影由相對於元素的X和Y的偏移量、模糊和擴散半徑以及顏色來描述

box-shadow用來設定元素的陰影效果，陰影不會影響頁面佈局

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    box-shadow: 10px 10px orange;
}

box-shadow: 10px 10px 5px orange;

box-shadow: 10px 10px 5px rgba(0, 0, 0, .2);

• 第一個值-水平偏移量：設定陰影的水平位置
  • 正值向右移動
  • 負值向左移動
• 第二個值-垂直偏移量：設定陰影的垂直位置
  • 正值向下移動
  • 負值向上移動
• 第三個值-陰影的模糊半徑
• 第四個值-陰影的顏色

4. 圓角

border-radius屬性使一個元素的外邊框邊緣的角變圓

你可以設定一個半徑來做圓角，或者設定兩個半徑來做橢圓角

border-radius 用來設定圓角，圓角設定的是圓的半徑大小

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

border-radius: 20px;

border-top-right-radius: 50px 100px;

border-radius 可以分別指定四個角的圓角

• 四個值：左上 右上 右下 左下
• 三個值：左上 右上/左下 右下
• 兩個值：左上/右下 右上/左下
• 一個值：左上/右上/右下/左下

這裡同樣不需要死記硬背，只要記住遵循順時針方向和矩形中心點對稱原則

與border不同的是，border是從上開始順時針設定，而圓角是從左上開始

圓

原理很簡單，就是繪製正方形，並將四個圓角半徑設定為正方形的一半

.box {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border-radius: 50%;
}

橢圓

只需要對上述樣式對一點點的改動，設定width和height屬性不相等即可

.box {
    width: 300px;
    height: 200px;
    background-color: yellow;
    border-radius: 50%;
}