CSS Secret 實(shí)用技術(shù)精華
--
0. 自適應(yīng)按鈕
- 將長(zhǎng)度值都改成
em單位，按鈕效果的值就變成可縮放（依賴于父元素字號(hào)）。 - 把半透明的黑色或白色疊加在主色調(diào)上 （
borderbackgroundbox-shadowtext-shadow），即可產(chǎn)生主色調(diào)的亮色和暗色變體周循。
websecret01.png
button {
padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 125%;
line-height: 1.5;
}
button.cancel {
background-color: #c00;
}
button.ok {
background-color: #6b0;
}
推薦使用HSLA而不是RGBA來產(chǎn)生半透明的白色蔚润，因?yàn)樗淖址L(zhǎng)度更短，敲起來也更快制肮。
--
1. background-clip屬性
-
background-clip:border-box：背景會(huì)延伸到邊框所在的區(qū)域下層，背景會(huì)被元素的 border box
（邊框的外沿框）裁切掉 -
background-clip:padding-box：瀏覽器會(huì)用內(nèi)邊距的外沿來把背景裁切掉递沪，用這種方法可以實(shí)現(xiàn)半透明邊框
websecret02.png
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
--
2. 多重邊框
websecret03.png
box-shadow 方案 （實(shí)線邊框）
box-shadow 設(shè)置正值的擴(kuò)張半徑加上兩個(gè)為零的偏移量以及為零的模糊值豺鼻，得到的投影其實(shí)就像一道實(shí)線邊框；它支持逗號(hào)分隔語法款慨，可以創(chuàng)建任意數(shù)量的投影拘领。
<!-- 單邊框 -->
background: yellowgreen;
box-shadow: 0 0 0 10px #655;
<!-- 雙邊框 -->
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
<!-- 三邊框 -->
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
- 投影跟邊框不同，其不影響布局樱调，也不會(huì)受到
box-sizing屬性的影響约素〗炝迹可以通過內(nèi)邊距或外邊距來模擬出邊框所需要占據(jù)的空間。- 上述方法所創(chuàng)建出的假邊框在外圈圣猎，不響應(yīng)鼠標(biāo)事件士葫，比如懸停或點(diǎn)擊送悔。如果需要鼠標(biāo)事件慢显，可以給
box-shadow屬性加上inset屬性，使投影在內(nèi)圈欠啤。
請(qǐng)注意荚藻，此時(shí)需要增加額外的內(nèi)邊距來騰出足夠的空隙。
outline 方案 （虛線邊框）
可以通過 outline-offset 屬性來控制它跟元素邊緣之間的間距洁段，這個(gè)屬性甚至可以接受負(fù)值应狱。只適用于雙層邊框的場(chǎng)景，因?yàn)?outline 并不能
接受用逗號(hào)分隔的多個(gè)值祠丝。如果我們需要獲得更多層的邊框疾呻，前一種方案就是我們唯一的選擇了。邊框不一定會(huì)貼合 border-radius 屬性產(chǎn)生的圓角写半，因此如果元素
是圓角的岸蜗，它的描邊可能還是直角的。
<!-- 雙邊框 -->
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
<!-- 內(nèi)虛線 -->
width: 100px;
height: 60px;
background: #655;
border: 10px solid #655;
outline: 1px dashed #fff;
outline-offset: -11px;
border-radius: 5px;
--
3. 靈活的背景定位
background-position 的擴(kuò)展語法方案
在偏移量前面指定關(guān)鍵字即可
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;
background-origin 方案
默認(rèn)情況下叠蝇，background-position 是以 padding box 為準(zhǔn)的璃岳，因此 top left 默認(rèn)指的是 padding box 的左上
角。設(shè)置 background-origin 屬性為 content-box悔捶， background-position 就會(huì)以內(nèi)容區(qū)的邊緣作為基準(zhǔn)矾睦。
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
bottom right; /* 或 100% 100% */
background-origin: content-box;
calc 方案
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
請(qǐng)不要忘記在 calc() 函數(shù)內(nèi)部的- 和+ 運(yùn)算符的兩側(cè)各加一個(gè)空白符，否則會(huì)產(chǎn)生解析錯(cuò)誤炎功！
--
4. 邊框內(nèi)圓角
websecret04.png
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
--
5. 條紋背景
水平條紋
通過設(shè)置漸變的起止點(diǎn)來創(chuàng)建條紋背景，其原理就是起始點(diǎn)等于終止點(diǎn)缓溅。
websecret05.png
<!-- T1 未設(shè)置漸變起止點(diǎn) -->
background: linear-gradient(#fb3, #58a);
<!-- T2 設(shè)置漸變開始于30%終止與70%-->
background: linear-gradient(#fb3 30%, #58a 70%);
<!-- T3 起始點(diǎn)等于終止點(diǎn)-->
background: linear-gradient(#fb3 50%, #58a 50%);
<!-- T4 平鋪-->
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 20px;
<!-- T5 不等寬平鋪-->
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 20px;
<!-- T5 三色條紋-->
background: linear-gradient(#fb3 33.3%,
#58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 30px;
如果我們把第二個(gè)色標(biāo)的位置值設(shè)置為 0蛇损，那它的位置就總是會(huì)被前一個(gè)位置值代替，即
background: linear-gradient(#fb3 30%, #58a 0);等價(jià)于background: linear-gradient(#fb3 30%, #58a 30%);
垂直條紋 & 斜線條紋
- 垂直條紋：修改參數(shù)
to right并且顛倒background-size參數(shù) - 斜向條紋：增加色標(biāo)到4個(gè)坛怪，并且改變寬度
- 斜線條紋平鋪：使用
repeating-radial-gradient()函數(shù)
websecret06.png
<!-- T1 三色條紋 -->
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;
<!-- T2 旋轉(zhuǎn)45度 -->
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;
<!-- T2 增加色標(biāo)到4個(gè) -->
background: linear-gradient( 45deg, #fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
<!-- T2 增加色標(biāo)到4個(gè)淤齐，并且增加寬度 -->
background: linear-gradient( 45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 42.426406871px 42.426406871px;
<!-- T2 使用repeating-linear-gradient參數(shù) -->
background: repeating-linear-gradient( 45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
<!-- T2 使用半透明白色的條紋疊加在背景色之上來得到淺色條紋 -->
background: #58a;
background-image: repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px);
--
6. 復(fù)雜的背景圖案
見 lea.verou.me/css3patterns 展示
--
7. 偽隨機(jī)背景
略
--
8. 連續(xù)的圖像邊框
- 老式信封樣式的邊框：把
background設(shè)置為padding-box， 通過background-size屬性來改變條紋的寬度袜匿，通過border屬性來改變整個(gè)邊框的厚度 - 螞蟻行軍邊框：把條紋轉(zhuǎn)變?yōu)楹诎變缮模堰吙虻膶挾葴p少至 1px，然后再把
background-size改為合適的值居灯，最后把background-position以動(dòng)畫的方式改變?yōu)?100%
websecret07.png
<!-- T1 老式信封樣式的邊框 -->
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
red 0, red 12.5%,
transparent 0, transparent 25%,
#58a 0, #58a 37.5%,
transparent 0, transparent 50%)
0 / 5em 5em;
<!-- T2 螞蟻行軍邊框 -->
@keyframes ants { to { background-position: 100% } }
.marching-ants {
padding: .5em;
border: 1px solid transparent;
background:
linear-gradient(#666, #666) padding-box,
repeating-linear-gradient(-45deg,
black 0, black 25%, white 0, white 50%
) 0 / .6em .6em;
animation: ants 12s linear infinite;
}
--
9. 自適應(yīng)的橢圓
websecret08.png
<!-- 半橢圓 -->
border-radius: 50% / 100% 100% 0 0;
border: 10px solid #ff6666;
background: #ff6666;
<!-- 半橢圓 -->
border-radius: 100% 0 0 100% / 50%;
border: 10px solid #ff6666;
background: #ff6666;
}
<!--1/4橢圓 -->
border-radius: 100% 0 0 0;
border: 10px solid #ff6666;
background: #ff6666;
--
10. 平行四邊形
- 把所有樣式（背景祭务、邊框等）應(yīng)用到偽元素上内狗，然后再對(duì)偽元素進(jìn)行變形
- 給宿主元素應(yīng)用
position: relative樣式，并為偽元素設(shè)置position: absolute义锥，然后再把所有偏移量設(shè)置為零柳沙，以便讓它在水平和垂直方向上都被拉伸至宿主元素的尺寸
websecret09.png
--
11. 菱形圖片
websecret10.png
<!-- html代碼 -->
<div class="pic">
</div>
<!-- css代碼 -->
.pic {
width: 100px;
height: 100px;
transform: rotate(45deg);
overflow: hidden;
}
.pic > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
width: 100px;
height: 100px;
background: #666;
}
--
12. 切角效果
使用漸變加上45度角來模擬
websecret11.png
<!-- 單切角 -->
background: linear-gradient(-45deg, transparent 10px, #58a 0);
<!-- 雙切角 -->
background: linear-gradient(-45deg, transparent 10px, #58a 0) right,
linear-gradient(45deg, transparent 10px, #58a 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
<!-- 4切角 -->
background: linear-gradient(135deg, transparent 10px, #58a 0) top left,
linear-gradient(-135deg, transparent 10px, #58a 0) top right,
linear-gradient(-45deg, transparent 10px, #58a 0) bottom right,
linear-gradient(45deg, transparent 10px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
--
13. 梯形標(biāo)簽頁(yè)
websecret12.png
.nav1 > a {
position: relative;
display: inline-block;
padding: 1em 1em 0.3em;
}
.nav1 > a::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #666;
border-radius: .5em .5em 0 0;
transform: perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}
.nav2 > a {
position: relative;
display: inline-block;
padding: 1em 1em 0.3em;
}
.nav2 > a::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #ccc;
background-image: linear-gradient( hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
border: 1px solid rgba(0,0,0,.4);
border-radius: .5em .5em 0 0;
box-shadow: 0 .15em white inset;
transform: perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}
--
14. 簡(jiǎn)單的餅圖
略
--
15. 單側(cè)投影
box-shadow: x-offset y-offset blur expand-radius color
websecret13.png
<!-- 普通 三參數(shù) -->
.shadow-org {
box-shadow: 2px 3px 4px rgba(0,0,0,.5)
}
<!-- 單側(cè) 四參數(shù) -->
.shadow-sig {
box-shadow: 0 5px 4px -4px black;
}
<!-- 雙側(cè)投影 -->
.shadow-both {
box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
}
--
16. 不規(guī)則投影
略
--
17. 染色效果
略
--
18. 毛玻璃效果
- 將box容器和filter元素的背景都設(shè)置為同一張圖片；
- 設(shè)置filter元素的
position: relative;overflow: hidden;z-index: 0; - 設(shè)置filter元素的偽元素
before為絕對(duì)定位拌倍，并且大小與其相等赂鲤，加上blur濾鏡，同時(shí)設(shè)置margin為一個(gè)較大的負(fù)值柱恤，最后將其z-index設(shè)置為負(fù)数初；
websecret15.png
.box, .filter:before {
background: url("../img/bak.jpg") 0 / cover fixed;
}
.box {
height: 300px;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.filter {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
z-index: 0;
}
.filter:before {
content: ' ';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
filter: blur(20px);
margin: -30px;
z-index: -1;
}
--
19. 折角效果
websecret16.png
.box .note1, .box .note2 {
width: 200px;
height: 100px;
}
.note1 {
position: relative;
background: #58a; /* 回退樣式 */
background:
linear-gradient(-150deg,
transparent 1.5em, #58a 0);
border-radius: .5em;
}
.note1::before {
content: '';
position: absolute;
top: 0; right: 0;
background: linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4))
100% 0 no-repeat;
width: 1.73em;
height: 3em;
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}
.note2 {
background: #08a;
background:
linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.4) 0)
no-repeat 100% 0 / 2em 2em,
linear-gradient(-135deg,
transparent 1.5em, #58a 0);
@include a(#ff7700);
}
// 最終包裝成函數(shù)
@mixin folded-corner($background, $size,
$angle: 30deg) {
position: relative;
background: $background; /* 回退樣式 */
background:
linear-gradient($angle - 180deg,
transparent $size, $background 0);
border-radius: .5em;
$x: $size / sin($angle);
$y: $size / cos($angle);
&::before {
content: '';
position: absolute;
top: 0; right: 0;
background: linear-gradient(to left bottom,
transparent 50%, rgba(0,0,0,.2) 0,
rgba(0,0,0,.4)) 100% 0 no-repeat;
width: $y; height: $x;
transform: translateY($y - $x)
rotate(2*$angle - 90deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.
}
}
/* 當(dāng)調(diào)用時(shí)... */
.note {
@include folded-corner(#58a, 2em, 40deg);
}
--
20. 連字符斷行
hyphens: auto;
--
21. 插入換行
- 通過"\000A"或簡(jiǎn)化為"\A"來設(shè)置換行
- 設(shè)置
white-space: pre保留源代碼中的空白符和換行 - 通過
dt:not(:?rst-child)或者dt ~ dt或者dd + dt定義換行
websecret17.png
.box {
background: #58a;
color: #fff;
padding: 20px;
width: 300px;
border-radius: 5px;
}
dt, dd {
display: inline;
margin: 0
}
dd + dt::before {
content: '\A';
white-space: pre;
}
dd + dd::before {
content: ', ';
font-weight: normal;
}
--
22. 文本行的斑馬條紋
websecret18.png
textarea {
padding: 0;
line-height: 1.55;
background: #eee;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}
--
23. 調(diào)整 tab 的寬度
pre {
tab-size: 2;
}
--
24. 連字
略
--
25. 華麗的 & 符號(hào)
略
--
26. 自定義下劃線
略
--
27. 現(xiàn)實(shí)中的文字效果
略
--
28. 環(huán)形文字
略
--
29. 選用合適的鼠標(biāo)光標(biāo)
略
--
30. 擴(kuò)大可點(diǎn)擊區(qū)域
略
--
31. 自定義復(fù)選框
websecret21.png
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
input[type="checkbox"] + label::before {
content: '\a0'; /* 不換行空格 */
display: inline-block;
vertical-align: .2em;
width: 1em;
height: 1em;
margin-right: .5em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}
--
32. 通過陰影來弱化背景
沒有給出完美方案
--
33. 通過模糊來弱化背景
略
--
34. 滾動(dòng)提示
略
--
36. 自適應(yīng)內(nèi)部元素
通過 min-content 設(shè)置容器內(nèi)部最大的不可斷行元素的寬度（即最寬的單詞、圖片或具有固定寬度的盒元素）
websecret19.png
figure {
max-width: 300px;
max-width: min-content;
margin: auto;
}
--
37. 精確控制表格列寬
對(duì)table-layout增加顯示的可控性
table {
table-layout: fixed;
width: 100%;
}
--
38. 根據(jù)兄弟元素的數(shù)量來設(shè)置
-
:only-child等價(jià)于:?rst-child:last-child梗顺， 即第一項(xiàng)同時(shí)也是最后一項(xiàng) -
:last-child等價(jià)于:nth-last-child(1)
- 找到某元素即是父元素的第一個(gè)子元素泡孩，同時(shí)也是從后往前數(shù)的第N個(gè)子元素
- 用兄弟選擇符
（~）來命中它之后的所有兄弟元素：相當(dāng)于在這個(gè)列表正好包含N個(gè)列表項(xiàng)
時(shí)，命中它的每一項(xiàng)
li:first-child:nth-last-child(n),
li:first-child:nth-last-child(n) ~ li {
/* 當(dāng)列表正好包含n項(xiàng)時(shí)荚守，命中所有列表項(xiàng) */
}
--
39. 滿幅的背景珍德，定寬的內(nèi)容
websecret20.png
<!-- html代碼 -->
<footer>
<p>The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer. </p>
</footer>
<!-- css代碼 -->
footer {
background: #333;
color: #fff;
padding: 1em calc(50% - 450px);
}
footer p {
text-align: center;
}
--
40. 垂直居中
- 通過
translate()變形函數(shù)實(shí)現(xiàn)平移 - 通過視口單位
vhvw實(shí)現(xiàn)相對(duì)于視口的相對(duì)位置
websecret14.png
<!-- html代碼 -->
<main>
<h1>Am I centered yet?</h1>
<p>Center me, please!</p>
</main>
<!-- translate()方法 -->
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ff9900;
padding: 10px;
}
<!-- vh&vw方法 -->
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
--
41. 緊貼底部的頁(yè)腳
<!-- html代碼 -->
<div class="main">...</div>
<footer></footer>
<!-- css代碼 -->
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
main { flex: 1; }
--
42. 緩動(dòng)效果
略
--
43. 逐幀動(dòng)畫
略
--
44. 閃爍效果
略
--
45. 打字動(dòng)畫
略
--
46. 狀態(tài)平滑的動(dòng)畫
略
--
47. 沿環(huán)形路徑平移的動(dòng)畫
略
