---
# System prepended metadata

title: CSS3

---

# CSS3

## border

border寫法: width style color。

- {border:___} style可設定值
    
    none 預設
    
    solid 實線
    
    double 雙線
    
    dotted 點
    
    dashed 虛線
    
    groove 內淺外深
    
    ridge 外深內淺
    
    inset  左上深至右下淺(漸層)
    
    outset 左上淺至右下深(漸層)
    
- {border-radius:___} 圓角
    
    可直接設定四個角的圓角 預設：(左上 右上 右下 左下)
    
    
### Border-radius
```html
<style>

.class{
 border-radius: 50px 20px;
 border-radius: 100% 0 0 0;
 border-radius: 1.2rem;
 border-radius:20px/50px;
}

</style>
```
1. 若只設定兩個值，會以對稱方式顯示。
1. 若設定四個值，會從左開始計算，順時針四個方向。
2. 設定單位為rem會比PX切得更好看一點
3. 如圖切法，會依照你給的單位去裁切。
![](https://i.imgur.com/IwdHcHi.png)


### Border-image
```html
<style>

.class{
 border-image:url('/image/...jpg') 40 ;
 border:40px solid teansparent
}

</style>
```
利用border製作一個圖框設計，會以四個角為主軸(不會更動)，而「邊」會重複顯示多個(依照你的寬、高)。

```html
<style>
.class{
border: 20px solid transparent;
border-image:20 repeating-linear-gradient(-45deg, #d22e2c 0, #d22e2c 20px, transparent 0 , transparent 40px, #2894c2 0, #2894c2 60px, transparent 0 ,transparent 80px);
</style>
```

---

### border外框的外框
※不會占空間
outline: 2px solid red; //線的大小 樣式 顏色
outline-offset: 10px;  //設定最大外框


---


## Background
### background-attachment 
指定背景影像是否固定或移動
fixed scroll



### Background-size
```html
<style>

.class{
background-size:contain;
background-size:cover;
}
</style>
```
Contain會顯示完整的一張圖。
Cover顯示圖片，超出部分裁切。

### Background-clip
```html
<style>

.class{
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
}
</style>
```
1. Border-box表示從border位置開始作圖的延伸。
1. padding-box表示從border位置開始作圖的延伸。
1. content-box表示從border位置開始作圖的延伸。

#### 製作吃背景圖片的字體
-webkit-background-clip: text;
color:transparent;
把顏色透明後直接吃到背景設定的圖片

---
## shadow 
陰影功能
```html
<style>
.class{
text-shadow: 2px 2px 5px gray;
box-shadow: 2px 2px 5px gray;
}
</style>
```
text-shadow:水平位移 垂直位移 模糊範圍 顏色
box-shadow:水平位移 垂直位移 模糊範圍 顏色
預設值為外陰影，在尾端寫入「inset」可變成內陰影。

---

## Gradient
可以使用漸層效果
### linear-gradient
```html
<style>

.class{
background: linear-gradient(to right, rgba(100,10,100,0.5) 80% , yellow 300px, url('/iamge/...jpg');
}

background: repeating-linear-gradient(rgba(100, 10, 100, 0.5), yellow 100px);

</style>
```

1. to right / to left / to bottom / to top
可設定漸層開始方向
1. deg
可設定漸層開始的角度
1. yellow 300px
可設定黃色的範圍
1. repeating設定可以在圖的尾端結束後又重複一次，不然系統會直接延展最後一個顏色。

#### radial-radient
```html
<style>

.class{
background: radial-gradient(red,#333 30%,#FFF 50%, Pink);
}
</style>
```
「at」可以決定漸層的中心點從哪開始
at 50px bottom,
at center top,

「circle」可以讓你的圓心都是圓形的，不管你的圖片長寬。


## display

```html
<style>
.wrapper{
display: flex;
}
</style>

<body>
<div class="wrapper">
<div class="box">1</div>
</div>
</body>
```

display有block、inline、flex 三種
1. block是可以設定寬高、佔一個區塊的。
1. inline是不可設定寬高依據本身內容物去改變大小的。
1. 預設值為block，flex會改變子元素型態，變成由左至右排列。
1. inline-block 以inline的方式呈現，但同時擁有block的屬性。
2. inline-flex 以inline的方式呈現，但同時擁有flex的屬性。


---


## left center right
對齊方式

### flex-direction
```html
<style>
.class{
flex-direction: row-reverse;
flex-direction: column-reverse;
}
</style>
```
flex-direction: row-reverse; 可將第一個物件從右邊當起始點排到左，方向改變。


### justify-content 水平對齊
```html
<style>
.class{
justify-content: flex-start;
justify-content: flex-end;
}
</style>
```
1. flex-start依照區塊大小從上邊開始，是物件從上至下順序排列。
1. flex-end依照區塊大小最後一個物件貼齊區塊下邊，是物件從上至下順序排列。
1. center依照區塊大小直接置中對齊。
1. stretch依照最高的區塊去統一所有高度
2. baseline 對齊內容物的基線

### align-items 垂直對齊
```html
<style>
.class{
align-items:flex-
}
</style>
```

1. flex-start依照區塊大小從左邊開始，是物件從左至右順序排列。
1. flex-end依照區塊大小最後一個物件貼齊區塊右邊，是物件從左至右順序排列。
1. center依照區塊大小直接置中對齊。
1. space-between 均分物件。
1. space-around 均分，會把中間間隔大小切成一半放左和右當左右寬間距。
1. space-evenly 均分，連左和右間距都一樣大小。


### flex-grow 分配剩餘空間

```html
<style>
.class1{
flex-grow:1;
}

.class2{
flex-grow:2;
}
</style>
```
flex-grow:1; 會回抓母空間剩餘1空間填滿 (全都分給有寫的那裏)
若有兩個物件都要分配剩餘空間，會把剩餘空間/，以此類推。
flex-shrink:設定的物件不會被壓縮，剩餘物件空間不足會依比例壓縮。
flex-basis:可以更改原本設定的Width
flex-wrap:warp不夠寬度時可以自己更換行列。

---

### align-self 自我對齊
自行對齊其他方塊的最上方、中間、最下方。
`
.class{
align-self: self-end;
}`
![](https://i.imgur.com/aFKedpr.png)

---

### order 選擇位置
值為-和+，-值會跑到第一個，+值會跑到最後一個。
看數字大小排順序。
通常會在網頁版切換手機版時使用
```
.class{
order:1 ; //數字越大越後面

.class2{
order:-1 ; //數字越大越前面
}
```

---

#### 超過容器寬度後自動變 ....
```
.class{
text-overflow: ellipsis;  //超過變...
white-space: nowrap; //強制文字變成一行
overflow: hidden; //超出部分切割
}
```
一定要三行程式碼都寫。
通常在網頁版會加上title顯示第一行全文字。

---

## tidy

### 限制顯示行數
```
.class{
-webkit-line-clamp:3;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
}
```

---


###  整理大量文字自動換行

```
.class{
word-break:break-all; 
}
```
word-break:break-all; 全部段行
word-break:break-word; 超出範圍部份段行

---


### calc
讓畫布可以去用減法計算/切版。
width設定為25%時可均分網頁成四份，若有另外設定margin和padding會比較麻煩，可以直接在width: calc(25% - margin/padding/border ;就可以去除邊框取得真的四等份。

---

## 切版方式

### translate
屬性:
transform: translate(x軸,y軸);
transform: translateX(...px)、translateY(...px);
transition: 0.秒s;
transform: rotate(幾度deg);
transform: scale(放大縮小多少);
transform: scale(水平方向,垂直方向);
transform: skew(水平方向,垂直方向);
transform: matrix(a,b,c,d,e,f)

(scale X)
b(skew Y)
c(skew X)
d(scale Y)
e(move X)
f(move Y)


#### transition
transition=transition-property+transition-duration

屬性:
transition(CSS屬性,秒數)
transition-delay:秒數

transition:屬性 秒數,屬性 秒數,屬性 秒數 ... 可以一直接下去

#### transition-timing-function:
linear   //維持正常速度
ease-in  //開始時加速，後慢
ease-out //開始慢，後加速
cubic-bezier(變化,變化,時間,時間)
![](https://i.imgur.com/CWoEfWw.png)

http://www.appanimations.com/

---

### Column
一大串文字自動切版
屬性:
column-count:切的行數;
column-gap:設定之間的空白格寬度;
column-rule:設定間格線的粗度 線條樣式 顏色;


#### masonry
瀑布流文字、圖片排列方式
利用column-count自動排列

設定最外寬
margin: 0 auto; //自動排列置中
max-width: 960px;  //最大畫布限制



保持區塊完整
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */

#### 修改區塊大小
屬性:
none|both|horizontal|vertical|initial|inherit
```
resize: both;
overflow: auto;
```


### grid
要寫在容器裡
display:grid
在設定要的數量，依照你要的隔數。
grid-template-columns: 要多寬 要多寬 要多寬 ;

EX
grid-template-columns: 100px 50% 20px;
這樣就會分3col

grid-template-rows:
如果要用fr(平均分配單位) 要設定高度給他
不然還會是預設值

grid-column-gap、grid-row-gap為格線的間距，一起寫的方式grid-gap

---

justify-self、align-self 針對一個class位置設定

---

fr這個單位會分配容器剩下的剩餘空間
repeat(4, 1fr) 也會平均分配

---

在容器內先設定好要切的線，這樣他就已經幫我們切好隱形的線，在物件裡再去設定要顯示的範圍。
```css
容器{
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
}


.class{
grid-column: 2/4;
grid-row: 3;
}
```

2/4的意思是 這兩個點的位置，所以顯示的是Col2~Col3
![](https://i.imgur.com/6cUcFH2.png)


---

reset.css 是破壞了所有的樣式
normalize.css 保留了一些元素 p和h1這種原型


---

```
容器{
grid-template-columns: repeat(4, auto);

grid-template-areas: "header header header header" "nav nav nav nav" "main main main aside" "footer footer footer footer";

}
```

/* 指定只有這個裡面區域的要重製*/
```
.container>* {
border: 1px solid #ccc;
padding: 5px;
}

header {
grid-area: header;
}

nav {
grid-area: nav;
}

main{
grid-area: main;
}

aside {
grid-area: aside;
}

footer {
grid-area: footer;
}
```

要對照class寫grid-area，grid-template-areas才會啟用。


---

---

### box-sizing
使用此標籤會把padding和margin算入長寬內
若設定width、height、padding、margin、border後，沒有設定box-sizing，總長寬是width+height+padding+margin+border。
若設定width、height、padding、margin、border後，有設定box-sizing，總長寬是你設定網頁的width、height。

如果需要計算，設定後border和padding都是往內縮，只需要扣除margin數值。

屬性
box-sizing: border-box;


---

## 變數
一定要定義在選擇器內，定義方式

```
--width: 200px ;  //定義
width:var(--width);  //使用
height:var(--width); //別人也可以使用
```

---

## Media Query
這是把網頁和手機的尺寸一致
要先確定在head裡有加入這行
```
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
```

設定方式如下
```css
<style>
    body{
        background: paleturquoise;
    }
    @media screen and (max-width: 960px) and (min-width:768px) {
        body{
            background: gold;
        }
    }
</style>
```

※注意：每個空白鍵都很重要



## Picture 圖片
在不同解析度之下變化圖片
背景圖和前景圖的差異
``` css
<picture>
<source media="(min-width: 650px)" srcset="images/dr_fate.jpg">
<source media="(min-width: 465px)" srcset="images/dr_strange.jpg"> 
<img src="images/deadpool.jpg" alt="Deadpool" style="width:auto;">  
</picture>
```

## animation 動畫
@keyframes類似function做動畫
寫法如下


```
@keyframes 變數 {
	from {background: red;}
	to {background: blue;}
}

.class{
animation-name: 變數;
animation-duration: 2s;
}

```

```
@keyframes 變數 {
	0% {background: red;}
	50% {background: blue;}
    100% {background: yellow;}
}

.class{
animation-name: 變數;
animation-duration: 2s;
}

```

可用參數
animation
animation-delay: 動畫延遲
animation-direction: 動畫播放方向
animation-duration: 動畫持續時間
animation-fill-mode: 動畫停止時顯示的畫面 
* forwards: 停在最後的狀態
* backwards: 停在最初的狀態
* both: 視 animation-direction 決定狀態

animation-iteration-count: 動畫播放次數 
* infinite(無限撥放)
animation-name: 選擇動畫
animation-play-state: 動畫狀態
animation-timing-function: 動畫播放


---

## CDN套件
動畫效果串聯
https://animate.style/

``` 
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
```

Class name : animate__animated 


實作
```css
<style>
        @keyframes walk{
            from{
                background-position:left top;
            }
            to{
                background-position: -3150px top;
            }
        }

        .Acat{
            /*單隻貓的設定*/
            width: 350px; 
            height: 380px;
            margin-inline:auto;
            background-image:url("/images/cat.png");
            background-position: -700px top;
            animation:walk 0.5s infinite steps(9);
            
        }
    </style>
```


## 濾淨效果
CSS 濾鏡效果，常用在 img 上
包含:
```
filter:blur(px): 模糊
filter:brightness(%): 亮度
filter:contrast(%):對比
filter:drop-shadow(h-shadow v-shadow blur color): 陰影 
filter:grayscale(%): 灰階
filter:hue-rotate(deg): 色相變換
filter:invert(%): 負片
filter:saturate(%): 飽和度
filter:sepia(%):
```


* filter:drop-shadow 和 box-shadow差異？
    1. drop-shadow是依照整個外型(如果是透明圖片)
    1. box-shadow是一個外框的陰影


---

裁切圖形產生器
https://bennettfeely.com/clippy/

---

老師的google文件
https://docs.google.com/presentation/d/1VyhiSrYTegror3gIkXcSFBG4WQWDyHjbhT5dWh8-SmI/edit#slide=id.g10f4415f2da_0_0