# css分享資料庫
###### tags: `切切切`
<!-- -->
<style>
.red{
color: #A94448;
padding: 0 4px;
}
.mainTitle{
color: #005bba;
}
</style>
### ⭐畫虛線 用repeating-linear-gradient和radial-gradient
[參考連結 🌐](https://hackmd.io/@mileyho/S1L6-nUmxl)
### ⭐ animation-timeline
用來指定動畫的進度來源，讓動畫不再只依靠時間，而是能根據捲動（scroll）或元素在畫面中的位置（view）來驅動動畫。
[參考連結 🌐](https://hackmd.io/@zyMaHiD6Rf6jIg67ijLJbQ/S1vpODEZex)
### ⭐ css 的巢狀語法
by 雅瓊
> [css 的巢狀語法：可以像scss一樣寫css，而且更強大（暫時連到官方文件）](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting)
### ⭐ :has()
> [:has() －可以指定上層和前面的元件](https://hackmd.io/0_XIq-MmTpmbLxOM288ddg?view)
### ⭐ :is(), :where()
> [:is(), :where()](https://hackmd.io/Mh-p-DzxSUWut3UrDbfmFw?view)
### ⭐ 重複漸層
> repeating-linear-gradient() 【[範例一](https://codepen.io/yachiung/pen/GRbwzbY)】【[範例二](https://codepen.io/yachiung/pen/OJeaqYy)】【[範例三](https://codepen.io/yachiung/pen/NWZEmGd)】
> repeating-conic-gradient() 【[範例四](https://codepen.io/yachiung/pen/KKjrYgy)】
> repeating-radial-gradient() 【[範例五](https://codepen.io/yachiung/pen/oNrQOov)】
### ⭐ width: min-content 在英文水平選單的應用
<iframe height="300" style="width: 100%;" scrolling="no" title="css: width: min-content 在英文水平選單的應用;" src="https://codepen.io/yachiung/embed/GRbqpYR?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yachiung/pen/GRbqpYR">
css: width: min-content 在英文水平選單的應用;</a> by yachiung (<a href="https://codepen.io/yachiung">@yachiung</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
### ⭐ 表格內資料使用刪節號
<iframe height="300" style="width: 100%;" scrolling="no" title="表格內資料使用刪節號" src="https://codepen.io/yachiung/embed/RwzMvmK?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yachiung/pen/RwzMvmK">
表格內資料使用刪節號</a> by yachiung (<a href="https://codepen.io/yachiung">@yachiung</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
### ⭐ block元件內可使用align-content垂直置中，不用下flex
```sass
align-content: start;
align-content: center;
align-content: end;
align-content: flex-start;
align-content: flex-end;
```
<iframe height="300" style="width: 100%;" scrolling="no" title="block 內元素垂直置中" src="https://codepen.io/veelatseng/embed/GRVJWjK?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/veelatseng/pen/GRVJWjK">
block 內元素垂直置中</a> by veela Tseng (<a href="https://codepen.io/veelatseng">@veelatseng</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
[https://developer.mozilla.org/en-US/docs/Web/CSS/align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
### ⭐ accent-color 變更checkbox/radio顏色
<iframe height="300" style="width: 100%;" scrolling="no" title="accent-color 變更checkbox/radio顏色" src="https://codepen.io/veelatseng/embed/XWvbGYN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/veelatseng/pen/XWvbGYN">
accent-color 變更checkbox/radio顏色</a> by veela Tseng (<a href="https://codepen.io/veelatseng">@veelatseng</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
### ⭐ 區塊內文字斷行設定
by 玟諭 : 2024.05.30
#### <i class="fa fa-pencil fa-fw"></i> word-break
[參考連結 🌐](https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break)
```css=
/* 依照區塊大小強制段行,但會截斷英文單字 */
word-break: break-all;
/* 依照區塊大小強制段行,不會截斷英文單字 */
word-break: normal;
/* 遇標點符號和空格強制段行 */
word-break: keep-all;
/* 為防止溢出，可能會在任意點斷字,但不會截斷英文單字 */
word-break: break-word; /* 已將棄用。不適用於新網站。 */
```
#### <i class="fa fa-pencil fa-fw"></i> overflow-wrap
[參考連結 🌐](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap)
:::warning
word-wrap 屬性原本屬於微軟的一個私有屬性，在 CSS3 現在的文本規範草案中已經被重名為 overflow-wrap 。 word-wrap 現在被當作 overflow-wrap 的 “別名”。穩定的谷歌 Chrome 和 Opera 瀏覽器版本支持這種新語法。
:::
```css=
/* 不會截斷英文單字 */
overflow-wrap: normal;
/* 任意點處中斷,但不可中斷的英文單字,在計算最小內容固有大小時，考慮由分詞引入的軟換行機會 */
overflow-wrap: anywhere;
/* 為防止溢出，可能會在任意點斷字,但不會截斷英文單字 */
overflow-wrap: break-word;
```
[連結 🌐](https://htmlcssroom.medium.com/%E5%88%87%E7%89%88%E7%B7%B4%E7%BF%92%E5%AE%A4-%E7%B5%82%E6%96%BC%E6%90%9E%E6%87%82overflow-wrap-word-wrap-word-break-white-space%E6%80%8E%E9%BA%BC%E7%94%A8%E4%BA%86-f93d99e16d84) ：搞懂overflow-wrap(word-wrap)、word-break
[連結 🌐](https://www.zhangxinxu.com/wordpress/2020/03/css-overflow-wrap-anywhere/) ：anywhere是什麼
### ⭐ 單位 rem 與 font size
by 雅瓊 : 2024.05.29
* rem 的 r 是 root, 表示根元件。對網頁而言，root 是 <HTML>（不是 <body>）。瀏覽器 <HTML> font size 的預設值通常是 16px，所以 1rem 的長度等於 16px。
* hyUI 改變文字大小的 class 是寫在 <body>，因此，如果單位使用rem，不會受所選擇的 font size 影響。
### ⭐ color-scheme
主講人： Lize
[簡報連結 🌐](https://hackmd.io/@lizewu/Hya8m5DbA)
:::info
練習如何使用 color-scheme，
用於切換日間、夜間模式
:::
---
### ⭐ isolation
主講人： 祺學
inherit / auto / isolate.
isolate: 本來是用來隔離mix-blend-mode元素的混合，但也可以用在z-index上，可以想想成這個dom元素的z-index就是獨立出來的，跟網站中其他的dom元素毫無關係。
當有父層背景時子元件設定z-index:-1，子元件會跑到背景後面，但是使用這個就不會被背景影響。
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/tseng7510/embed/BaejEaa?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/tseng7510/pen/BaejEaa">
Untitled</a> by tseng7510 (<a href="https://codepen.io/tseng7510">@tseng7510</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### ⭐ inset
簡化top , right, bottom, left的個別設定
設定方式跟padding/margin一樣
一個值 = 上下左右
兩個值 = 上下 / 左右
三個值 = 上 / 左右 / 下
四個值 = 上 / 下 / 左 / 右
<iframe height="300" style="width: 100%;" scrolling="no" title="inset" src="https://codepen.io/tseng7510/embed/oNRbOba?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/tseng7510/pen/oNRbOba">
inset</a> by tseng7510 (<a href="https://codepen.io/tseng7510">@tseng7510</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### ⭐ max / min /clamp
適用於RWD狀況或是有可能會變動版型時
#### <i class="fa fa-pencil fa-fw"></i> max
(value,min)
```css=
width:max(50%,100px);
```
可以同時設定寬度和最小值就是width, min-width
寬度是 50%，否則就使用 50px。
#### <i class="fa fa-pencil fa-fw"></i> min
(value,max)
```css=
width:min(50%,300px);
```
可以同時設定寬度和最大值就是width, max-width
寬度是 50%，最大 200px。
#### <i class="fa fa-pencil fa-fw"></i> clamp
(min,value,max)
```css=
width:clamp(100px, 50%, 300px);
```
可以同時設定寬度和最小值和最大值就是min-width, width, max-width
<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/tseng7510/embed/MWdKReo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/tseng7510/pen/MWdKReo">
Untitled</a> by tseng7510 (<a href="https://codepen.io/tseng7510">@tseng7510</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### ⭐ max-content / min-content / fit-content
可以用來設定寬度與高度的屬性，min-width、min-height、max-width、max-height 中都可以使用。
#### <i class="fa fa-pencil fa-fw"></i> max-content
寬度等於內容最大寬度，表示內容固有的最大的寬度或高度，以 text 內容來說，就算會溢出（overflow）也不會換行。
#### <i class="fa fa-pencil fa-fw"></i> min-content
寬度等於內容最小寬度，表示最小不會造成溢出（overflow）的寬度。對於文字（text）內容來說，會變得與最長的單詞一樣的寬度。
#### <i class="fa fa-pencil fa-fw"></i> fit-content
依照內容寬度伸縮，會讓元素使用可用空間，但不會大於 max-content。
<iframe height="300" style="width: 100%;" scrolling="no" title="max-width / min-width / fit-content" src="https://codepen.io/tseng7510/embed/ZENWJoa?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/tseng7510/pen/ZENWJoa">
max-width / min-width / fit-content</a> by tseng7510 (<a href="https://codepen.io/tseng7510">@tseng7510</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### ⭐ gap
用來設定網格行與列之間的間隙（gutters），屬性是 row-gap 與 column-gap 的簡寫形式。
因為flex也支援gap，使用上可以更廣泛，可以減少margin的使用
<iframe height="300" style="width: 100%;" scrolling="no" title="gap" src="https://codepen.io/tseng7510/embed/ZENOKwV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/tseng7510/pen/ZENOKwV">
gap</a> by tseng7510 (<a href="https://codepen.io/tseng7510">@tseng7510</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### ⭐ text-emphasis
對文字進行強調裝飾
text-emphasis-style
可自定義出現符號，如果填入超過兩個字以第一個字為主
#### <i class="fa fa-pencil fa-fw"></i> text-emphasis-style
內建的幾個裝飾符效果，dot（點）、circle（圓）、double-circle（雙層圓）、triangle（三角形）、sesame（芝麻點），並可以設定是否為空心。
```css=
text-emphasis: filled dot;
text-emphasis: open dot;
text-emphasis: filled circle;
text-emphasis: open circle;
text-emphasis: filled double-circle;
text-emphasis: open double-circle;
text-emphasis: filled triangle;
text-emphasis: open triangle;
text-emphasis: filled sesame;
text-emphasis: open sesame;
```
#### <i class="fa fa-pencil fa-fw"></i> text-emphasis-position
指定強調裝飾符的位置，預設位置是在正文的上方，我們可以指定強調裝飾符在正文的下方，也可以指定垂直排版的時候強調裝飾符是左側還是右側。
```css=
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;
text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;
```
<iframe height="300" style="width: 100%;" scrolling="no" title="text-emphasis" src="https://codepen.io/tseng7510/embed/OJYXmex?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/tseng7510/pen/OJYXmex">
text-emphasis</a> by tseng7510 (<a href="https://codepen.io/tseng7510">@tseng7510</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### ⭐ table th 固定 by css
主講人： Lize
[**codepen sample 🌐**](https://codepen.io/Lize/pen/gOqgdMW)
1. 水平 th 固定：[教學](https://jsfiddle.net/f2XYF/8/)
2. 水平垂直標題固定：[教學](https://www.astralweb.com.tw/pure-css-implementation-table-headers-columns-fixed/)
4. table-layout：fixed 注意事項
* 使用此關鍵字時，需要使用該 width 屬性明確指定表格的寬度。
* 如果該屬性的值 width 設定為 auto 或未指定，則瀏覽器將使用自動表格佈局演算法，在這種情況下該 fixed 值不起作用。
* 固定表格佈局演算法比自動佈局演算法更快，因為表格的水平佈局僅取決於表格的寬度、列的寬度以及邊框或儲存格間距。水平佈局不依賴單元格的內容，因為它僅依賴明確設定的寬度。
* [**文章來源**](https://blog.miniasp.com/post/2009/04/20/Use-CSS-table-layout-property-to-speed-up-table-rendering)
* [**table-layout**](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)
:::warning
建議 hyui 的 table 都加入 thead、tbody，較符合無障礙
:::
---
### ⭐ display: grid
主講人： Miley
[**簡報連結 🌐**](https://hackmd.io/@mileyho/B18JUAEZp)
---
### ⭐ 以 ::before ::after 繪製條件搜尋圖示
主講人： 雅瓊
<iframe height="300" style="width: 100%;" scrolling="no" title="以 ::before ::after 繪製條件搜尋圖示" src="https://codepen.io/yachiung/embed/abXawzN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yachiung/pen/abXawzN">
以 ::before ::after 繪製條件搜尋圖示</a> by yachiung (<a href="https://codepen.io/yachiung">@yachiung</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### ⭐ @properties 應用（自訂 CSS 屬性）
主講人： 雅瓊
<iframe height="300" style="width: 100%;" scrolling="no" title=" CSS custom properties 應用" src="https://codepen.io/yachiung/embed/NWoLprx?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yachiung/pen/NWoLprx">
CSS custom properties 應用</a> by yachiung (<a href="https://codepen.io/yachiung">@yachiung</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
[**關於 @properties 的一點點說明**](https://hackmd.io/yT1GMIa8Q0uWmKJYCdMFkQ)
[**在 codepen 上找到的範例 🌐**](https://codepen.io/skay/pen/OJxRxjE)
---
### ⭐ 濾鏡函式(Filter Function)
主講人： 玟諭
可以讓我們輕鬆達到滑鼠觸摸時的轉變效果，像是可以一開始是灰階的影像，觸摸時變成彩色的。且「<font color="#EE428B">不同濾鏡函式可以疊加使用</font>」，如「filter:blur(1px) opacity(0.5)」，會同時具備模糊及半透明效果。
#### <i class="fa fa-pencil fa-fw"></i> drop-shadow() 陰影函式
[**連結 🌐**](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow)
>對物件建立一個陰影效果，與box-shadow效果相似，但特點在於陰影函式可以直接忽略圖片透明區域空間，直接對影像不透明度做陰影效果。
```sass=
filter: drop-shadow(30px 10px 4px #4444dd);
```
[**濾鏡總覽連結 🌐**](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function)
---
### ⭐ 文字裝飾(text-decoration)
>此屬性的設定值有：none(無效果)、underline(底線)、overline(頂線)、line-through(刪除線)、inherit(繼承)；但實際上「text-decoration」是由五個屬性組成的：
- [text-decoration-thickness](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness)(線段厚度)
- text-decoration-style(線段樣式)：
- dotted(點線)
- dashed(虛線)
- solid(單實線)
- double(雙實線)
- <font color="#EE428B">wavy (波浪線) </font>
- text-decoration-color(線段色彩)
- text-decoration-line(線段位置)
- <font color="#EE428B">text-decoration-offset(線段偏移位置)：設定底線線段與文字之間的距離</font> [**連結 🌐**](https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset)
[**總攬連結 🌐**](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)
---
### ⭐ 背景線性漸層應用(linear-gradient)
你會怎麼切紫色這塊？
漸層的語法有很多種，例如：
```scss=
background-image: linear-gradient(#f00, #ff0);
background-image: linear-gradient(#f00 0 % , #ff0 100 % );
background-image: linear-gradient(to right, #f00, #ff0);
background-image: linear-gradient(to left bottom, #f00 0 % , #ff0 100 % );
background-image: linear-gradient(0deg, #f00, #ff0);
background-image: linear-gradient(110deg, #f00 0 % , #ff0 100 % );
background-image: linea-gradient(角度, 起始色彩 起始色彩的位置, 結束色彩 結束色彩的位置);
background-image: linear-gradient(115 deg, #f00 50 % , transparent 50 % );
```
<iframe height="300" style="width: 100%;" scrolling="no" title="背景線性漸層應用" src="https://codepen.io/sammymia/embed/ExreMwg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/sammymia/pen/ExreMwg">
背景線性漸層應用</a> by anniewu (<a href="https://codepen.io/sammymia">@sammymia</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### ⭐ svg filter變色
[**範例連結 🌐**](https://codepen.io/veelatseng/pen/LYqBBMr)
---
### ⭐ scroll-padding-top / backgroung-clip
[**簡報連結 🌐**](https://hackmd.io/@mileyho/rJFgziZT3)
---
### ⭐ border-image
[**筆記連結 🌐**](https://hackmd.io/@yachiung/HJCbn830n)
[**MDN Web Docs 說明文件連結 🌐**](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image)
---
### ⭐ css var()簡單應用 --myColor: #{$primaryColor};
[**筆記連結 🌐**](https://hackmd.io/@yachiung/rkcZ009A2)
Sign in with Wallet
Connect another wallet