# CSS Filters濾鏡效果

###### tags: `CSS`

---
## Filters
|名稱|效果|使用方式|
|---|---|--|
|grayscale|灰階|1和100%|
|sepia|懷舊|
|saturate|飽和|
|hue-rotate|色相旋轉|
|invert|負片|
|opacity|不透明|
|brightness|亮度|
|contrast|對比|
|blur|模糊|
|drop-shadow|下拉陰影|

>詳細使用方式可參考：
>http://blog.shihshih.com/css-filter/

---
<span class="code1"></span>
<style>
h2 {
color: #2383B8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383B8;
padding:8px;
}

.code1 {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 90%;
font-family:'Fira Code';
}
</style>