# 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. 如圖切法，會依照你給的單位去裁切。
### 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;
}`
---
### 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(變化,變化,時間,時間)
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
---
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
Sign in with Wallet
Connect another wallet