css 动态生成圆形区域内扇形个数_CSS实用技巧总结
作者:幻靈爾依 (授權(quán)原創(chuàng))
https://juejin.im/post/5e0fef935188253a624a6a72
?《css揭秘》中講了47個(gè)css技巧,其中有很多日常編碼中并不會(huì)用到,本文除了將書(shū)中部分實(shí)用技巧羅列出來(lái)之外,還嘗試用幫助讀者搞明白background、animation 等常用但是卻掌握不牢固的知識(shí)點(diǎn)。所以閱讀本文不僅可以學(xué)習(xí)一些實(shí)用技巧,也可以鞏固自己的 css 基礎(chǔ)知識(shí)。
實(shí)用小技巧
DRY原則
全名Don't Repeat Yourself,該原則適用于所有編程語(yǔ)言而不限于css。
擴(kuò)大可點(diǎn)擊區(qū)域
- 關(guān)鍵實(shí)現(xiàn):偽元素
- 具體分析:利用偽元素和定位達(dá)到鼠標(biāo)移到邊緣時(shí)候出現(xiàn)手型且可點(diǎn)擊
??position:?relative;
}
.expand-range:after?{
??content:?'';
??position:?absolute;
??top:?-10px;?right:?-10px;?bottom:?-10px;?left:?-10px;
}
推薦使用scss:
@mixin expand-range($top: -10px, $right: $top, $bottom: $top, $left: $right, $position: relative) {position: $position;
&:after {
content: '';
position: absolute;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
}
//使用:.test { @include expand-range($top: -5px, $position: absolute) }
巧用層疊上下文
- 關(guān)鍵實(shí)現(xiàn): 偽元素 層疊上下文
- 具體分析: 利用層疊上下文和 z-index: -1 特性實(shí)現(xiàn)偽元素覆蓋背景同時(shí)又不會(huì)遮擋文字(具體實(shí)現(xiàn)原理參考這里 )。這是一個(gè)非常常用又好用的技巧,善加利用可以達(dá)到很多意想不到的效果。地址
??top:?0;?right:?0;?bottom:?0;?left:?0;
??z-index:?-1;
層疊上下文
邊框內(nèi)圓角
- 關(guān)鍵實(shí)現(xiàn):偽元素 層疊上下文
- 具體分析:利用偽元素實(shí)現(xiàn)圓角矩形并疊加在父元素的背景之上文字之下:地址
clip-path
- 關(guān)鍵實(shí)現(xiàn): clip-path
- 具體分析:css3 新屬性 clip-path 可以實(shí)現(xiàn)區(qū)域裁剪,現(xiàn)在瀏覽器支持較好的有三個(gè)函數(shù):clip-path: circle(50px at 50px 50px) 以 50px 50px 的地方為圓心裁剪一個(gè)半徑 50px 的圓;clip-path: ellipse(30px 40px at 50px 50px) 以 50px 50px 的地方為圓心裁剪一個(gè)橫向半徑 30px,縱向半徑 40px 的橢圓;clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) 按照多個(gè)坐標(biāo)剪裁一個(gè)多邊形,此處是菱形。有了 clip-path,就可以輕易的實(shí)現(xiàn)任意多邊形了:地址
自適應(yīng)的橢圓
- 關(guān)鍵實(shí)現(xiàn):border-radius
- 具體分析:border-radius 竟然可以設(shè)置 8 個(gè)角的半徑~ 其中水平方向(對(duì)角線(xiàn)上下有弧度的地方)和垂直方向(對(duì)角線(xiàn)左右有弧度的地方)各四個(gè),可以用 / 分割。如果水平或垂直方向指定的值少于四個(gè),則會(huì)按照和 margin、padding 一樣的規(guī)則重復(fù)。如果只指定來(lái)水平方向的,那么垂直方向的跟水平方向的一樣。
自適應(yīng)的橢圓
自適應(yīng)寬度
- 關(guān)鍵實(shí)現(xiàn):min-content關(guān)鍵字
- 具體分析:如何實(shí)現(xiàn)一個(gè)元素的寬度根據(jù)后代元素的最大固定元素寬度自適應(yīng)呢?絞盡腦汁,也只能利用 display: inline-block 的包裹特性實(shí)現(xiàn)一個(gè)不完全的版本:地址 這種方法的缺陷是文本脫離了文檔流,高度未計(jì)入包含塊。但是如果利用 min-content 關(guān)鍵字,可以一行代碼實(shí)現(xiàn)且無(wú)副作用:地址
自適應(yīng)寬度
投影模擬多重邊框
- 關(guān)鍵實(shí)現(xiàn):box-shadow的inset
- 具體分析:使用box-shadow可以模擬實(shí)現(xiàn)多重邊框,但是由于陰影不占空間,所以無(wú)法觸發(fā)點(diǎn)擊事件,鼠標(biāo)hover邊框時(shí)無(wú)法出現(xiàn)小手,所以需要配合inset關(guān)鍵字使用:地址
??background:?cyan;
??box-shadow:?0?0?0?5px?#000?inset,
??????????????0?0?0?10px?#555?inset,
??????????????0?0?0?15px?#999?inset;
投影模擬多重邊框
單側(cè)投影
- 關(guān)鍵實(shí)現(xiàn):box-shadow
- 具體分析:box-shadow 前兩個(gè)參數(shù)指定陰影的x、y偏移量,注意若為正數(shù)時(shí)整體向右/向下偏移,那么相應(yīng)的左方/上方會(huì)空出一部分來(lái)(可以用來(lái)隱藏模糊半徑或擴(kuò)張半徑),負(fù)數(shù)相反;第三個(gè)參數(shù)是陰影模糊半徑,即高斯模糊多增加出來(lái)的過(guò)度顏色;第四個(gè)參數(shù)是陰影擴(kuò)張半徑,表示陰影增加的尺寸,可以是負(fù)數(shù),表示陰影縮短的尺寸:地址
第二個(gè)參數(shù)使陰影整體下移 5px ,第三個(gè)參數(shù)使陰影四周多了 4px 的高斯模糊(注意由于整體下移了 5px,所以此時(shí)上方還是沒(méi)有陰影露出的),第四個(gè)參數(shù)又把陰影整體縮小了 4px,,所以左右兩邊才沒(méi)有出現(xiàn)模糊半徑導(dǎo)致的高斯模糊陰影色,從而實(shí)現(xiàn)單側(cè)投影。
單側(cè)投影還可以逗號(hào)分隔設(shè)置多個(gè)陰影色,比如下面的兩側(cè)投影效果:地址
??box-shadow:?5px?0?5px?-5px?black,?????????????-5px?0?5px?-5px?black;
單側(cè)投影
不規(guī)則投影
- 關(guān)鍵實(shí)現(xiàn):filter: drop-shadow()
- 具體分析:box-shadow 不能透過(guò)透明背景顯示出來(lái),不能越過(guò)偽元素/子元素顯示出來(lái),而這些drop-shadow能做到。(但無(wú)論哪種投影都會(huì)被clip-path剪裁掉~~)地址
不規(guī)則投影
濾鏡的染色和褪色效果
前端開(kāi)發(fā)大都了解糊濾的高斯模鏡效果是filter: blur()實(shí)現(xiàn)的,但是卻很少使用濾鏡的其他幾個(gè)調(diào)色效果。filter 的值有blur()、drop-shadow()、url()、brightness()、contrast()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()~~可以使用復(fù)合形式如:filter: sepia(1) saturate(4)等。下面是filter屬性值大集合:地址
濾鏡的染色和褪色效果餅圖 svg
餅圖的 css 實(shí)現(xiàn)方案非常奇怪,所以我忽略之。推薦使用 svg 的實(shí)現(xiàn)方案,非常簡(jiǎn)單,先來(lái)個(gè)基本教學(xué)吧~
先畫(huà)個(gè)圓:
<svg?width="100"?height="100">??<circle?r="25"?cx="50"?cy="50"?/>
svg>
這里 r="25" 是半徑25, cx cy 分別表示圓心的 x y 坐標(biāo)。
circle?{??fill:?yellowgreen;
??stroke:?#666;
??stroke-width:?50;
}
這里給圓形定義了一個(gè)寬度 40 的描邊:
餅圖 svg再把描邊設(shè)為線(xiàn)段長(zhǎng)度 20 間隔 10 的虛線(xiàn):
circle?{????...
????stroke-dasharray:?20?10;
}
當(dāng)把虛線(xiàn)的間隔設(shè)定為大于等于圓周時(shí),虛線(xiàn)的線(xiàn)段長(zhǎng)度就是一個(gè)扇形區(qū)域(當(dāng)線(xiàn)段長(zhǎng)度等于圓周時(shí)扇區(qū)達(dá)到100%):
給 svg 設(shè)置圓角和背景色,并旋轉(zhuǎn) -90deg ,就可以實(shí)現(xiàn)一個(gè)餅圖:地址(使用currentColor關(guān)鍵字和color: inherit 是為了實(shí)現(xiàn)DRY原則。)
但是這樣的餅圖其扇區(qū)大小是不易計(jì)算的,為了方便計(jì)算,可以讓虛線(xiàn)的線(xiàn)段長(zhǎng)度同時(shí)也是圓周無(wú)限接近100,這樣就可以更方便的設(shè)置扇區(qū)的百分比。圓周是 2πr ,所以 100 = 2πr ,計(jì)算得出半徑 r 近似值 16。再利用 svg 的 viewBox 屬性,實(shí)現(xiàn)自適應(yīng)容器大小的餅圖:地址
這種方法有個(gè)弊端,就是當(dāng)設(shè)置 stroke-dasharray: 100 100 時(shí)會(huì)有一條縫,這是取近似值無(wú)法避免的。
背景 background
background 是我們最常用的屬性之一,但作為一個(gè)老前端,我也只能羞恥的說(shuō)我目前并沒(méi)有完全掌握這個(gè)屬性。
background 是一個(gè)簡(jiǎn)寫(xiě)屬性,可以包括多個(gè)屬性:background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background-attachment 。接下來(lái)我們一個(gè)個(gè)來(lái)看看這些屬性的作用:
- background-color 最常用的屬性,默認(rèn)不繼承(background的所有屬性都默認(rèn)不繼承),初始值為 transparent;有時(shí)候使用默認(rèn)繼承可以實(shí)現(xiàn)一些好玩的效果,比如倒影;
- backgroundo-image 背景圖片,可以逗號(hào)分割設(shè)置多個(gè),可以是圖片url或者漸變色;
- background-clip 背景剪裁,可以逗號(hào)分割設(shè)置多個(gè),值可以為 broder-box(初始值)、padding-box、content-box、text(新,將背景被文字剪裁);
- background-origin 設(shè)置背景起始點(diǎn)的相對(duì)區(qū)域,搭配 background-position 使用,可以逗號(hào)分割設(shè)置多個(gè),值可以是border-box、padding-box(初始值)、content-box;
- background-position 設(shè)置背景的起始點(diǎn),可以逗號(hào)分割設(shè)置多個(gè),值可以是 10px 20px 、center center 、left 10px bottom 20px等等,非常靈活;
- background-size 設(shè)置背景的大小,可以逗號(hào)分割設(shè)置多個(gè),值可以是數(shù)字值如30px 40px、auto auto(初始值)、conver、contain;background-repeat: repeat就是根據(jù)這個(gè)尺寸大小來(lái)重復(fù)的。
- background-repeat 設(shè)置背景的重復(fù)方式,初始值為 repeat,常使用值的還有no-repeat;
- background-attachment 設(shè)置背景圖像的位置是在視口內(nèi)固定,還是隨著包含它的區(qū)塊滾動(dòng)。可以逗號(hào)分割設(shè)置多個(gè),值有scroll(初始值)、local、fixed。詳情查看MDN
簡(jiǎn)寫(xiě)時(shí) background-size 只能緊接著 background-position 出現(xiàn),以 / 分割,如: "center / 80%"。
半透明邊框
- 關(guān)鍵實(shí)現(xiàn):background-clip
- 具體分析:由于background屬性默認(rèn)會(huì)覆蓋整個(gè)盒模型包括邊框border,所以設(shè)置border-color: rgba(0, 0, 0, .5)時(shí)會(huì)透出背景色,達(dá)不到半透明邊框的效果。css3增加了background-clip屬性,定義背景填充的裁剪區(qū)域。設(shè)置padding-box便可以實(shí)現(xiàn)半透明邊框:地址
??background:?white;
??background-clip:?padding-box;
半透明邊框
靈活的背景定位
- 關(guān)鍵實(shí)現(xiàn):backgrond-position background-origin
- 具體分析:我們都知道background-position可以定位背景圖片等位置,但是都是相對(duì)padding-box的左上角開(kāi)始等。css3 允許這樣寫(xiě):background-position: right 10px bottom 20px,同時(shí) css3 還支持background-origin,其默認(rèn)值如同其表現(xiàn)border-box,支持設(shè)為padding-box和content-box:地址
??padding:?10px;
??border:?5px?solid?cyan;
??background:?lightblue;
??background:?radial-gradient(#00a4fd,?cyan)?no-repeat?right?100px?bottom?/?100px?100px;
??background-origin:?content-box;
背景定位
background-position 設(shè)為百分比值較為復(fù)雜。百分比值實(shí)際上執(zhí)行了以下的計(jì)算公式:
(container width - image width) * (position x%) = (x offset value)(container height - image height) * (position y%) = (y offset value)
由計(jì)算公式可知:當(dāng)值為0%時(shí),實(shí)際偏移值為0px,此時(shí)圖片的左邊界(或上邊界)和容器的左邊界(或上邊界)重合;當(dāng)值為50%時(shí),實(shí)際偏移值為容器減圖片剩余空間的一半,圖片左右邊界(或上下邊界)距離容器左右邊界(或上下邊界)相等,此時(shí)圖片的中點(diǎn)和容器的中點(diǎn)重合。當(dāng)值100%時(shí),實(shí)際偏移值為容器減圖片的剩余空間,所以此時(shí)圖片的右邊界(或下邊界)和容器的右邊界(或下邊界)重合。二者之差為負(fù)值時(shí)同樣有效。地址
背景定位條紋背景
- 關(guān)鍵實(shí)現(xiàn):background-image
- 實(shí)現(xiàn)分析:利用線(xiàn)性漸變實(shí)現(xiàn)多種顏色的交錯(cuò)重復(fù),形成條紋背景。lienar-gradient的第一個(gè)參數(shù)是漸變的角度,可以是方向關(guān)鍵字to top(初始值,可忽略不寫(xiě))等,也可以是角度90deg等;#fb3 50%指的是色標(biāo)和終點(diǎn)位置值;這里linear-gradient的第二個(gè)位置值設(shè)置為0會(huì)被解析為前一個(gè)色標(biāo)的位置值即50%,這樣寫(xiě)更加符合DRY原則。
background-size:?100%?30px;
條紋背景
也可以設(shè)置為垂直條紋背景:
background:?linear-gradient(to?right,?#fb3?50%,?#58a?0);background-size:?100%?30px;
還可以設(shè)置為斜向條紋:
background:?linear-gradient(45deg,?#fb3?25%,?#58a?0,?#58a?50%,?#fb3?0,?#fb3?75%,?#58a?0);background-size:?30px?30px;
垂直條紋背景
斜向條紋需要設(shè)置四條條紋才能在平鋪到時(shí)候做到無(wú)縫拼接。
更好的斜向條紋:(這里必須設(shè)置起始值#fb3 0)
background:?repeating-linear-gradient(60deg,?#fb3?0,?#fb3?15px,?#58a?0,?#58a?30px);更好的斜向條紋
網(wǎng)格
- 關(guān)鍵實(shí)現(xiàn):background-image、background-size
- 給多個(gè)漸變?cè)O(shè)置不同的方向、大小,可以實(shí)現(xiàn)網(wǎng)格的效果。地址
background-image:?linear-gradient(white?1px,?transparent?0),
??????????????????linear-gradient(to?right,?white?1px,?transparent?0);
background-size:?30px?30px;
網(wǎng)格
更好的網(wǎng)格:
background:?#58a;background-image:?linear-gradient(white?2px,?transparent?0),
??????????????????linear-gradient(to?right,?white?2px,?transparent?0),
??????????????????linear-gradient(rgba(255,?255,?255,?.5)?1px,?transparent?0),
??????????????????linear-gradient(to?right,?rgba(255,?255,?255,?.5)?1px,?transparent?0);
background-size:?75px?75px,?75px?75px,?15px?15px,?15px?15px;
更好的網(wǎng)格
棋盤(pán)
- 關(guān)鍵實(shí)現(xiàn):background-image、background-size、background-position
- 具體分析:給多個(gè)漸變?cè)O(shè)置不同的大小、位置,可以實(shí)現(xiàn)網(wǎng)格的效果。地址
??background-image:
????linear-gradient(45deg,?rgba(0,?0,?0,?.25)?25%,?transparent?0,?transparent?75%,?rgba(0,?0,?0,?.25)?0),
????linear-gradient(45deg,?rgba(0,?0,?0,?.25)?25%,?transparent?0,?transparent?75%,?rgba(0,?0,?0,?.25)?0);
??background-size:?30px?30px;
??background-position:?0?0,?15px?15px;
棋盤(pán)
折角
- 關(guān)鍵實(shí)現(xiàn):線(xiàn)性漸變
- 具體分析:150deg 是為了形成30度角,方便利用勾股定理測(cè)出各種長(zhǎng)度,其他的靠你自己看了~ 地址
到這里 background 屬性基本講完了,光看無(wú)用,多動(dòng)手實(shí)踐吧。
波點(diǎn)
- 關(guān)鍵實(shí)現(xiàn):徑向漸變
- 具體分析:利用徑向漸變實(shí)現(xiàn)一個(gè)個(gè)小圓點(diǎn),按規(guī)律擺放即能生成波點(diǎn) 地址
????radial-gradient(tan?30%,?transparent?0),
????radial-gradient(tan?30%,?transparent?0);
??background-color:?#666;
??background-size:?30px?30px;
??background-position:?0?0,?15px?15px;
波點(diǎn)
切角
- 關(guān)鍵實(shí)現(xiàn):clip-path、徑向漸變
- 具體分析:一般來(lái)說(shuō)多邊形的切角效果(其實(shí)還是不規(guī)則多邊形)用clip-path都可以輕松實(shí)現(xiàn),但是對(duì)于圓形的切角,使用徑向漸變是最好的選擇。但是如果有弧形的切角呢?radial-linear第一個(gè)參數(shù)指定漸變的起始點(diǎn)點(diǎn)(默認(rèn)為中心點(diǎn)),同時(shí)可指定漸變類(lèi)型是橢圓還是圓;地址
????radial-gradient(circle?at?top?left,?transparent?15px,?blue?0)?top?left,
????radial-gradient(circle?at?top?right,?transparent?15px,?cyan?0)?top?right,
????radial-gradient(circle?at?bottom?right,?transparent?15px,?cyan?0)?bottom?right,
????radial-gradient(circle?at?bottom?left,?transparent?15px,?cyan?0)?bottom?left;
??background-size:?50%?50%;
??background-repeat:?no-repeat;
切角
餅圖
- 關(guān)鍵實(shí)現(xiàn):錐形漸變
- 具體分析:利用錐形漸變可以輕松實(shí)現(xiàn)多個(gè)扇區(qū),所以 svg 的方法權(quán)當(dāng)學(xué)習(xí)了一波 svg 用法吧。
餅圖
動(dòng)畫(huà) animation
animation 屬性是 animation-name、animation-duration、 animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 屬性的一個(gè)簡(jiǎn)寫(xiě)屬性形式。
- animation-name 指定動(dòng)畫(huà)的名稱(chēng),可以逗號(hào)分割設(shè)置多個(gè)(以下皆可);
- animation-duration 指定動(dòng)畫(huà)運(yùn)行的時(shí)間;
- animation-delay 指定動(dòng)畫(huà)執(zhí)行前的延時(shí);
- animation-timing-function 指定動(dòng)畫(huà)執(zhí)行的速度函數(shù),如linear、ease(默認(rèn))、ease-in-out等,也可用貝塞爾函數(shù)cubic-bezier();
- animation-iteration-count 指定動(dòng)畫(huà)的運(yùn)行的次數(shù),默認(rèn)為1,可以為Infinite無(wú)限次;
- animation-direction 指定動(dòng)畫(huà)是否反方向播放,normal 正常的順序,alternate 交替運(yùn)行,reverse 反向運(yùn)行,alternate-reverse 反向交替運(yùn)行;
- animation-fill-mode 設(shè)置CSS動(dòng)畫(huà)在執(zhí)行之前和之后的樣式,none 不設(shè)置,forwards 保留最后一幀動(dòng)畫(huà)的樣式,backwards 立即應(yīng)用第一個(gè)關(guān)鍵幀中定義的值,并在animation-delay期間保留此值,both 同時(shí)應(yīng)用forwards和backwards的規(guī)則;
- animation-play-state 定義一個(gè)動(dòng)畫(huà)是否運(yùn)行或者暫停,值為running、paused。
回彈效果
如何給動(dòng)畫(huà)加上回彈效果呢?這里介紹一種最便利的方法:
- 關(guān)鍵實(shí)現(xiàn):cubic-bezier(x1, y1, x2, y2)
- 具體分析:利用貝塞爾曲線(xiàn)的第二個(gè)控制錨點(diǎn)大于 1 時(shí)的特性實(shí)現(xiàn)回彈
上圖圖橫軸為時(shí)間,縱軸為動(dòng)畫(huà)進(jìn)度。圖中貝塞爾曲線(xiàn)有兩個(gè)控制手柄,x1, y1 控制第一個(gè)錨點(diǎn),x2, y2控制第二個(gè)錨點(diǎn)。其中 x1 、x2 不能大于/小于 1,但是y1, y2 可以。當(dāng) y2 大于 1 時(shí),就會(huì)產(chǎn)生提前到達(dá)終點(diǎn),然后超過(guò)終點(diǎn),然后再返回終點(diǎn)的效果,像回彈一樣。地址
??animation:?bounce?3s?both?cubic-bezier(.7,?.1,?.3,?2);transition 屬性是 transition-property、transition-duration、transition-timing-function、transition-delay 的一個(gè)簡(jiǎn)寫(xiě)屬性。使用 transition 同樣可以實(shí)現(xiàn)回彈效果:地址
p?{??transform-origin:?1.4em?-.4em;
??transition:?transform?.5s?cubic-bezier(.25,?.1,?.3,?1.5);
}
input:not(:focus)?+?p?{
??transform:?scale(0);
??transition:?transform?300ms;?/*此處是為了縮小時(shí)重置transition-timing-function,不觸發(fā)回彈*/
}
會(huì)動(dòng)的背景
- 關(guān)鍵實(shí)現(xiàn):animation、background-position
- 具體分析:將動(dòng)畫(huà)最后一幀的background-position設(shè)為100% 0%,動(dòng)畫(huà)便會(huì)將背景位置從最初的0% 0%向最后的100% 0%過(guò)度:地址
??width:?150px;?height:?150px;
??background:?url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
??background-size:?auto?100%;?
??animation:?panoramic?10s?linear?infinite?alternate;
}
div:hover?{
??animation-play-state:?paused;
}
@keyframes?panoramic?{
??to?{?background-position:?100%?0;?}
}
環(huán)形路徑移動(dòng)的動(dòng)畫(huà)
- 關(guān)鍵實(shí)現(xiàn):animation transform-origin
- 具體分析:設(shè)置旋轉(zhuǎn)容器的transform-origin為大圓容器中心點(diǎn),同時(shí)利用兩個(gè)元素在向不同方向旋轉(zhuǎn)時(shí)旋轉(zhuǎn)角度互相抵消的原理,實(shí)現(xiàn)圖像沿環(huán)形路徑旋轉(zhuǎn)同時(shí)保持自身角度的不變。注意小圓距離大圓的距離由大圓的padding屬性控制,調(diào)整padding時(shí)需要調(diào)整小圓的旋轉(zhuǎn)原點(diǎn)transform-origin以保持環(huán)形路徑的正確:地址
??to?{?transform:?rotate(1turn);?}
}
.avatar?{
??animation:?spin?3s?linear?2s?infinite;
??transform-origin:?110px?110px;
}
.avatar?>?img?{
??animation:?inherit;
??animation-direction:?reverse;
}
環(huán)形路徑移動(dòng)的動(dòng)畫(huà)
筆者推薦css文章
其實(shí)現(xiàn)在社區(qū)已經(jīng)不乏介紹 css 技巧的好文,這里推薦幾篇我覺(jué)得寫(xiě)的極好的css技巧文章(當(dāng)然可能大家也看過(guò),很慚愧我其實(shí)現(xiàn)在也沒(méi)看完):
- 不止于 CSS
- 靈活運(yùn)用CSS開(kāi)發(fā)技巧
- 你未必知道的49個(gè)CSS知識(shí)點(diǎn)
- 你未必知道的CSS知識(shí)點(diǎn)(第二季)
- 《CSS世界》中提到的實(shí)用技巧
- 我寫(xiě)CSS的常用套路
- 50道CSS基礎(chǔ)面試題(附答案)
- CSS 面試題總結(jié)
總結(jié)
總體來(lái)說(shuō),《css揭秘》這本書(shū)并沒(méi)有給我?guī)?lái)太大驚喜,個(gè)人感覺(jué)不如閱讀《css世界》帶來(lái)的收獲多。當(dāng)然了,這本書(shū)屬于純技巧型的,并沒(méi)有講述很多原理知識(shí),所以也不能苛責(zé)吧。有興趣的同學(xué)可以跟著我學(xué)習(xí)一波 css世界,相信肯定會(huì)有更大的收獲~
總結(jié)
以上是生活随笔為你收集整理的css 动态生成圆形区域内扇形个数_CSS实用技巧总结的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 判别两棵树是否相等 设计算法_一文看懂生
- 下一篇: kafka使用_Kafka介绍与使用