# MFEE-11-CSS

###### tags: `CSS`、`MFEE`

## 零、目錄&待辦事項

## 雜、inline、block、inline-block差異

### 一、inline：行內元素，沒有高度、不會換行(不是占滿一整塊)
像是span、a...

### 二、block：區塊元素，有高度、會換行(是占滿一整塊)

像是p、h1~h6、div...

## 0.index.html

### CSS的寫法：

1. head內的link
2. head內的style
3. body內的style -> 行內式

* 後面的會蓋掉前面的執行，所以通常是3.行內式 > 2.head內的style > 1.head內的link，1.跟2.不一定，要看HTML碼的位子。

## 1.border-radius.html

* Color & Opacity 顏色與透明度
ff 00 00
R G B
用0-9跟a-f來表示16進位
#ff0000，這是紅色
#00ff00，這是綠色
#0000ff，這是綠色

* RGBA表示法
rgba(255,0,0,03)
R, G, B, n0n-opacity

* border-radius的css語法

/* 畫圓 */
.box5{
    background-color: #aaf;
    border-radius: 50%;
    /* 四個角都畫成圓角，極限就是50%，超過的話就會變成圓 */
}

/* 畫扇形 */
.box6{
    background-color: #aaf;
    border-radius: 100% 0 0 0;
}

/* 畫橢圓，20>10，40>30，60>50，80>70 */
.box7{
    background-color: rgb(255, 166, 0);
    border-radius: 20px 40px 60px 80px /10px 30px 50px 70px;
}

### 2.ex1.html
* 為了語意下figure提升SEO，其實也可以用div
* img外面一定要下一層div，避免爆板問題。
* 設定img w100% h100%，就不會爆版了。
* 那個父層要設定overflow:hidden。

## 3.ex2.html

## 4.border-image.html

這個是自己設計的邊框樣式，先下一個border，再放一個border-image蓋過去。

.box{
    width: 400px;
    height: 400px;
    border: 20px solid red;
    border-image: url(./images/border-image.png) 20 round;
}