整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
. 文字水平居中
將一段文字置于容器的水平中點(diǎn)，只要設(shè)置text-align屬性即可：
text-align:center;
2. 容器水平居中
先該容器設(shè)置一個(gè)明確寬度，然后將margin的水平值設(shè)為auto即可。
div#container { width:760px; margin:0 auto; }
3. 文字垂直居中
單行文字的垂直居中，只要將行高與容器高設(shè)為相等即可。
比如，容器中有一行數(shù)字。
<div id="container">1234567890</div>
然后CSS這樣寫(xiě)：
div#container {height: 35px; line-height: 35px;}
如果有n行文字，那么將行高設(shè)為容器高度的n分之一即可。
4. 容器垂直居中
比如，有一大一小兩個(gè)容器，請(qǐng)問(wèn)如何將小容器垂直居中？
<div id="big"> <div id="small"> </div></div>
首先，將大容器的定位為relative。
div#big{position:relative;height:480px; }
然后，將小容器定位為absolute，再將它的左上角沿y軸下移50%，最后將它margin-top上移本身高度的50%即可。
div#small { position: absolute; top: 50%; height: 240px; margin-top: -120px; }
5. 圖片寬度自適應(yīng)
如何使得較大的圖片，能夠自動(dòng)適應(yīng)小容器的寬度？CSS可以這樣寫(xiě)：
img {max-width: 100%}
6. 3D按鈕
要使按鈕具有3D效果，只要將它的左上部邊框設(shè)為淺色，右下部邊框設(shè)為深色即可。
div#button { background: #888; border: 1px solid; border-color: #999 #777 #777 #999; }
7. font屬性快捷寫(xiě)法
font快捷寫(xiě)法的格式為：
body { font: font-style font-variant font-weight font-size line-height font-family; }
所以，
body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; font-variant: small-caps; font-style: italic; line-height: 150%; }
可以被寫(xiě)成：
body { font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif; }
8. link狀態(tài)設(shè)置順序
link的四種狀態(tài)，需要按照下面的前后順序進(jìn)行設(shè)置：
a:link a:visited a:hover a:active
9. CSS優(yōu)先性
如果同一個(gè)容器被多條CSS語(yǔ)句定義，那么哪一個(gè)定義優(yōu)先呢？
基本規(guī)則是：
行內(nèi)樣式 > id樣式 > class樣式 > 標(biāo)簽名樣式
比如，有一個(gè)元素：
<div id="ID" class="CLASS" style="color:black;"></div>
行內(nèi)樣式是最優(yōu)先的，然后其他設(shè)置的優(yōu)先性，從低到高依次為：
div < .class < div.class < #id < div#id < #id.class < div#id.class
10. font-size基準(zhǔn)
瀏覽器的缺省字體大小是16px，你可以先將基準(zhǔn)字體大小設(shè)為10px：
body {font-size:62.5%;}
后面統(tǒng)一采用em作為字體單位，2.4em就表示24px。
h1 {font-size: 2.4 em}
11. Text-transform和Font Variant
Text-transform用于將所有字母變成小寫(xiě)字母、大寫(xiě)字母或首字母大寫(xiě)：
p {text-transform: uppercase} p {text-transform: lowercase} p {text-transform: capitalize}
Font Variant用于將字體變成小型的大寫(xiě)字母（即與小寫(xiě)字母等高的大寫(xiě)字母）。
p {font-variant: small-caps}
12. CSS重置
CSS重置用于取消瀏覽器的內(nèi)置樣式，請(qǐng)參考YUI和Eric Meyer的樣式表。
13. 用圖片充當(dāng)列表標(biāo)志
默認(rèn)情況下，瀏覽器使用一個(gè)黑圓圈作為列表標(biāo)志，可以用圖片取代它：
ul {list-style: none} ul li { background-image: url("path-to-your-image"); background-repeat: none; background-position: 0 0.5em; }
14. 透明
將一個(gè)容器設(shè)為透明，可以使用下面的代碼：
.element { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
在這四行CSS語(yǔ)句中，第一行是IE專(zhuān)用的，第二行用于Firefox，第三行用于webkit核心的瀏覽器，第四行用于Opera。
15. CSS三角形
如何使用CSS生成一個(gè)三角形？
先編寫(xiě)一個(gè)空元素
<div class="triangle"></div>
然后，將它四個(gè)邊框中的三個(gè)邊框設(shè)為透明，剩下一個(gè)設(shè)為可見(jiàn)，就可以生成三角形效果：
.triangle { border-color: transparent transparent green transparent; border-style: solid; border-width: 0px 300px 300px 300px; height: 0px; width: 0px; }
16. 禁止自動(dòng)換行
如果你希望文字在一行中顯示完成，不要自動(dòng)換行，CSS命令如下：
h1 { white-space:nowrap; }
17. 用圖片替換文字
有時(shí)我們需要在標(biāo)題欄中使用圖片，但是又必須保證搜索引擎能夠讀到標(biāo)題，CSS語(yǔ)句可以這樣寫(xiě)：
h1 { text-indent:-9999px; background:url("h1-image.jpg") no-repeat; width:200px; height:50px; }
18. 獲得焦點(diǎn)的表單元素
當(dāng)一個(gè)表單元素獲得焦點(diǎn)時(shí)，可以將其突出顯示：
input:focus { border: 2px solid green; }
19. !important規(guī)則
多條CSS語(yǔ)句互相沖突時(shí)，具有!important的語(yǔ)句將覆蓋其他語(yǔ)句。由于IE不支持!important，所以也可以利用它區(qū)分不同的瀏覽器。
h1 { color: red !important; color: blue; }
上面這段語(yǔ)句的結(jié)果是，其他瀏覽器都顯示紅色標(biāo)題，只有IE顯示藍(lán)色標(biāo)題。
20. CSS提示框
當(dāng)鼠標(biāo)移動(dòng)到鏈接上方，會(huì)自動(dòng)出現(xiàn)一個(gè)提示框。
<a class="tooltip" href="#">鏈接文字 <span>提示文字</span></a>
CSS這樣寫(xiě)：
a.tooltip {position: relative} a.tooltip span {display:none; padding:5px; width:200px;} a:hover {background:#fff;} /*background-color is a must for IE6*/ a.tooltip:hover span{display:inline; position:absolute;}
21. 各類(lèi)瀏覽器的專(zhuān)用語(yǔ)句
/* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child+html #dos { color: red } /* IE7, FF, Saf, Opera */ html>body #tres { color: red } /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ html>/**/body #cuatro { color: red } /* Opera 9.27 and below, safari 2 */ html:first-child #cinco { color: red } /* Safari 2-3 */ html[xmlns*=""] body:last-child #seis { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:nth-of-type(1) #siete { color: red } /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ body:first-of-type #ocho { color: red } /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { #veintiseis { color: red } } /* Safari 2 - 3.1 */ html[xmlns*=""]:root #trece { color: red } /* Safari 2 - 3.1, Opera 9.25 */ *|html[xmlns*=""] #catorce { color: red } /* Everything but IE6-8 */ :root *> #quince { color: red } /* IE7 */ *+html #dieciocho { color: red } /* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red } /* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { color: red } /***** Attribute Hacks ******/ /* IE6 */ #once { _color: blue } /* IE6, IE7 */ #doce { *color: blue; /* or #color: blue */ } /* Everything but IE6 */ #diecisiete { color/**/: blue } /* IE6, IE7, IE8 */ #diecinueve { color: blue; } /* IE7, IE8 */ #veinte { color/*\**/: blue; } /* IE6, IE7 -- acts as an !important */ #veintesiete { color: blue !ie; } /* string after ! can be anything */
22. 容器的水平和垂直居中
HTML代碼如下：
<figure class='logo'> <span></span> <img class='photo'/></figure>
CSS代碼如下：
.logo { display: block; text-align: center; display: block; text-align: center; vertical-align: middle; border: 4px solid #dddddd; padding: 4px; height: 74px; width: 74px; } .logo * { display: inline-block; height: 100%; vertical-align: middle; } .logo .photo { height: auto; width: auto; max-width: 100%; max-height: 100%; }
23. CSS陰影
外陰影：
.shadow { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; }
內(nèi)陰影：
.shadow { -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000; box-shadow:inset 0 0 10px #000000; }
24. 取消IE文本框的滾動(dòng)條
textarea { overflow: auto; }
25. 黑白圖像
這段代碼會(huì)讓你的彩色照片顯示為黑白照片，是不是很酷？
img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}
26. 使用 :not() 在菜單上應(yīng)用/取消應(yīng)用邊框
先給每一個(gè)菜單項(xiàng)添加邊框
/* add border */.nav li { border-right: 1px solid #666;}
然后再除去最后一個(gè)元素
// remove border /.nav li:last-child { border-right: none;}
可以直接使用 :not() 偽類(lèi)來(lái)應(yīng)用元素：
.nav li:not(:last-child) { border-right: 1px solid #666;}
這樣代碼就干凈，易讀，易于理解了。
當(dāng)然，如果你的新元素有兄弟元素的話(huà)，也可以使用通用的兄弟選擇符（~）：
.nav li:first-child ~ li { border-left: 1px solid #666;}
27. 頁(yè)面頂部陰影
下面這個(gè)簡(jiǎn)單的 CSS3 代碼片段可以給網(wǎng)頁(yè)加上漂亮的頂部陰影效果：
body:before { content: ""; position: fixed;top: -10px; left: 0; width: 100%;height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100;}
28. 給 body 添加行高
你不需要分別添加 line-height 到每個(gè)p,h標(biāo)記等。只要添加到 body 即可,這樣文本元素就可以很容易地從 body 繼承。
body { line-height: 1;}
29. 所有一切都垂直居中
要將所有元素垂直居中，太簡(jiǎn)單了：注意：在IE11中要小心flexbox。
html, body { height: 100%; margin: 0;}body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;}
30. 逗號(hào)分隔的列表
讓HTML列表項(xiàng)看上去像一個(gè)真正的，用逗號(hào)分隔的列表,對(duì)最后一個(gè)列表項(xiàng)使用 :not() 偽類(lèi)。
ul > li:not(:last-child)::after { content: ",";}
31. 使用負(fù)的 nth-child 選擇項(xiàng)目
在CSS中使用負(fù)的 nth-child 選擇項(xiàng)目1到項(xiàng)目n。
li { display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) { display: block;}
32. 對(duì)圖標(biāo)使用 SVG
我們沒(méi)有理由不對(duì)圖標(biāo)使用SVG，SVG對(duì)所有的分辨率類(lèi)型都具有良好的擴(kuò)展性，并支持所有瀏覽器都回歸到IE9。這樣可以避開(kāi).png、.jpg或.gif文件了。
.logo { background: url("logo.svg");}
33. 優(yōu)化顯示文本
有時(shí)，字體并不能在所有設(shè)備上都達(dá)到最佳的顯示，所以可以讓設(shè)備瀏覽器來(lái)幫助你：
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
注：請(qǐng)負(fù)責(zé)任地使用 optimizeLegibility。此外，IE /Edge沒(méi)有 text-rendering 支持。
34. 對(duì)純 CSS 滑塊使用 max-height
使用 max-height 和溢出隱藏來(lái)實(shí)現(xiàn)只有CSS的滑塊：
.slider ul { max-height: 0; overlow: hidden;}.slider:hover ul { max-height: 1000px; transition: .3s ease;}
35. 繼承 box-sizing
讓 box-sizing 繼承 html：
html { box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit;}
這樣在插件或杠桿其他行為的其他組件中就能更容易地改變 box-sizing 了。
36. 表格單元格等寬
表格工作起來(lái)很麻煩，所以務(wù)必盡量使用 table-layout: fixed 來(lái)保持單元格的等寬：
.calendar { table-layout: fixed;}
37. 用 Flexbox 擺脫外邊距的各種 hack
當(dāng)需要用到列分隔符時(shí)，通過(guò)flexbox的 space-between 屬性，你就可以擺脫nth-，first-，和 last-child 的hack了：
.list { display: flex; justify-content: space-between;}.list .person { flex-basis: 23%;}
現(xiàn)在，列表分隔符就會(huì)在均勻間隔的位置出現(xiàn)。
38. 使用屬性選擇器用于空鏈接
當(dāng)a元素沒(méi)有文本值，但 href 屬性有鏈接的時(shí)候顯示鏈接：
a[href^="http"]:empty::before { content: attr(href);}
相當(dāng)方便。
39. 檢測(cè)鼠標(biāo)雙擊
HTML：
<div class="test3"> <span><input type="text" value=" " readonly="true" /> <a >Double click me</a></span></div>
CSS：
.test3 span { position: relative;}.test3 span a { position: relative; z-index: 2;}.test3 span a:hover, .test3 span a:active { z-index: 4;}.test3 span input { background: transparent; border: 0; cursor: pointer; position: absolute; top: -1px; left: 0; width: 101%; /* Hacky */ height: 301%; /* Hacky */ z-index: 3;}.test3 span input:focus { background: transparent; border: 0; z-index: 1;}
40. CSS 寫(xiě)出三角形
/* create an arrow that points up */div.arrow-up { width:0px; height:0px; border-left:5px solid transparent; /* left arrow slant */ border-right:5px solid transparent; /* right arrow slant */ border-bottom:5px solid #2f2f2f; /* bottom, add background color here */font-size:0px; line-height:0px;}/* create an arrow that points down */div.arrow-down { width:0px; height:0px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #2f2f2f;font-size:0px; line-height:0px;}/* create an arrow that points left */div.arrow-left { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */ border-top:5px solid transparent; /* right arrow slant */ border-right:5px solid #2f2f2f; /* bottom, add background color here */ font-size:0px; line-height:0px;}/* create an arrow that points right */div.arrow-right { width:0px; height:0px; border-bottom:5px solid transparent; /* left arrow slant */ border-top:5px solid transparent; /* right arrow slant */ border-left:5px solid #2f2f2f;/* bottom, add background color here */ font-size:0px; line-height:0px;}
41. CSS3 calc() 的使用
calc() 用法類(lèi)似于函數(shù)，能夠給元素設(shè)置動(dòng)態(tài)的值：
/* basic calc */.simpleBlock { width: calc(100% - 100px);}/* calc in calc */.complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% - 2px); margin-left: calc(10% + 10px);}
42. 文本漸變
文本漸變效果很流行，使用 CSS3 能夠很簡(jiǎn)單就實(shí)現(xiàn)：
h2[data-text] { position: relative;}h2[data-text]::after { content: attr(data-text); z-index: 10; color: #e3e3e3; position: absolute; top: 0; left: 0; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
43. 禁用鼠標(biāo)事件
CSS3 新增的 pointer-events 讓你能夠禁用元素的鼠標(biāo)事件，例如，一個(gè)連接如果設(shè)置了下面的樣式就無(wú)法點(diǎn)擊了。
.disabled { pointer-events: none; }
44. 模糊文本
簡(jiǎn)單但很漂亮的文本模糊效果，簡(jiǎn)單又好看！
.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
45.簡(jiǎn)單的方法調(diào)整圖片大小
.content img {height:auto;width:500px;}
46.CSS陰影
.shadow {-moz-box-shadow: 3px 3px 5px 6px #ccc;-webkit-box-shadow: 3px 3px 5px 6px #ccc;box-shadow: 3px 3px 5px 6px #ccc;}
47.CSS首字放大
p:first-letter {display: block;float: left;margin: 5px 5px 0 0;color: red;font-size: 1.4em;background: #ddd;font-family: Helvetica;}
48.用CSS翻轉(zhuǎn)圖像
#content img {-moz-transform: scaleX(-1);-o-transform: scaleX(-1);-webkit-transform: scaleX(-1);transform: scaleX(-1);filter: FlipH;-ms-filter: "FlipH";}
49.移除被點(diǎn)鏈接的點(diǎn)框
a {outline: none}或者a {outline: 0}
50.元素透明
.element {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}
51.使用CSS顯示鏈接之后的URL
a:after{content:" (" attr(href) ") ";}這會(huì)在鏈接錨點(diǎn)后顯示URL。你也可以用字體或其他樣式定義它。
52.為手持設(shè)備定制特殊樣式
<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">
53.用圖片充當(dāng)列表標(biāo)志
ul {list-style: none}ul li {background-image: url("path-to-your-image");background-repeat: none;background-position: 0 0.5em;}
54.禁止自動(dòng)換行
h1 { white-space:nowrap; }
55.獲得焦點(diǎn)的表單元素
input:focus { border: 2px solid green; }
56.user-select 禁止用戶(hù)選中文本
div {user-select: none; /* Standard syntax */}
57.清除手機(jī)tap事件后element 時(shí)候出現(xiàn)的一個(gè)高亮
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}
58.增強(qiáng)用戶(hù)體驗(yàn)，使用偽元素實(shí)現(xiàn)增大點(diǎn)擊熱區(qū)
.btn::befoer{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;}
59.偽元素實(shí)現(xiàn)換行，替代換行標(biāo)簽
inline-element ::after{content:"A";white-space: pre;}
60.will-change提高頁(yè)面滾動(dòng)、動(dòng)畫(huà)等渲染性能
/* 關(guān)鍵字值 */will-change: auto;will-change: scroll-position;will-change: contents;will-change: transform; /* <custom-ident>示例 */will-change: opacity; /* <custom-ident>示例 */will-change: left, top; /* 兩個(gè)<animateable-feature>示例 */will-change的使用也要謹(jǐn)慎，遵循最小化影響原則，不要這樣直接寫(xiě)在默認(rèn)狀態(tài)中，因?yàn)閣ill-change會(huì)一直掛著：.will-change {will-change: transform;transition: transform 0.3s;}.will-change:hover {transform: scale(1.5);}可以讓父元素hover的時(shí)候，聲明will-change，這樣，移出的時(shí)候就會(huì)自動(dòng)remove，觸發(fā)的范圍基本上是有效元素范圍。.will-change-parent:hover .will-change {will-change: transform;}.will-change {transition: transform 0.3s;}.will-change:hover {transform: scale(1.5);}
61.box-sizing 讓元素的寬度、高度包含border和padding
{box-sizing: border-box;}
62.calc() function, 計(jì)算屬性值
div {width: calc(100% - 100px);}例子就是讓寬度為100%減去100px的值
63.css實(shí)現(xiàn)不換行、自動(dòng)換行、強(qiáng)制換行
//不換行white-space:nowrap;//自動(dòng)換行word-wrap: break-word;word-break: normal;//強(qiáng)制換行word-break:break-all;
64.perspective 透視
這個(gè)屬性的存在決定你看到的元素是2d還是3d。一般設(shè)置在包裹元素的父類(lèi)上。.div-box {perspective: 400px;}
65.設(shè)置圖像透明度的兩種方式
opcity:0.6；background:rgba(0,0,0,.6)；
66.position定位屬性
position屬性指定一個(gè)元素(靜態(tài)的、相對(duì)的、絕對(duì)或固定)的定位方法的類(lèi)型。position的屬性值：absolute：生成絕對(duì)定位的元素；fixed：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位；relative：生成相對(duì)定位的元素，相對(duì)于其正常位置經(jīng)行定位。z-index：指定一個(gè)元素的堆疊順序。
67.cursor屬性
cursor屬性定義了鼠標(biāo)指針?lè)旁谝粋€(gè)元素邊界范圍內(nèi)時(shí)所用的光標(biāo)形狀。CSS提供的cursor值：pointer ：小手指；help：箭頭加問(wèn)號(hào)；wait：轉(zhuǎn)圈圈；move：移動(dòng)光標(biāo)；crosshair：十字光標(biāo)。通過(guò)pointer屬性我們可以偽造超鏈接：<span >pointer</span>
68.隱藏沒(méi)有靜音、自動(dòng)播放的影片
video[autoplay]:not([muted]) {display: none;}
69.Font-Size 基準(zhǔn)
/* 假設(shè)瀏覽器的默認(rèn)的大小是 16px ， 首先將其設(shè)置為10px (font-size:10/16) */body {font-size:10/16;}/* 然后就可以用em做統(tǒng)一字體單位了 2.4em=24px */h1 {font-size: 2.4 em}
70.透明容器
.element {filter:alpha(opacity=50); /* for ie */-moz-opacity:0.5; /* for ff */-khtml-opacity: 0.5; /* for webkit as chrome */opacity: 0.5; /* for opera */}
使用css3 的 2D變形中的 skew() 傾斜屬性，讓偽元素傾斜而不是li傾斜，是為了讓li的文本正常顯示。
<style>.keith li { list-style: none; position: relative; display: inline-block; padding: 10px 15px; color: #fff; cursor: pointer;}.keith li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; border-radius: 5px; z-index: -1; background: #2175BC; transform: skewX(-25deg);}.keith li:hover::after { background: #39a3f5;}</style><ul class='keith'> <li>首頁(yè)</li> <li>筆記</li> <li>問(wèn)問(wèn)</li> <li>學(xué)習(xí)</li> <li>設(shè)置</li></ul>
72、梯形導(dǎo)航條
使用css3 3D 變形中的 perspective()、rotateX()、transform-origin。
perspective(): 用于設(shè)置用戶(hù)和元素3D空間Z平面之間的距離，值越小，用戶(hù)與3D空間Z平面距離越近，視覺(jué)效果會(huì)明顯；反之，值越大，用戶(hù)與3D空間Z平面距離越遠(yuǎn)，視覺(jué)效果越小。
rotateX(): 3D空間上X軸的旋轉(zhuǎn)
tansform-origin: 指定元素的旋轉(zhuǎn)中心點(diǎn)位置，可以控制梯形傾斜。值為bottom，不傾斜；值為left，左傾斜；值為right，右傾斜。
<style>.keith li { list-style: none; position: relative; display: inline-block; padding: 20px 15px 5px 15px; margin-left: -10px; color: #fff; cursor: pointer;}.keith li::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background: #2175BC; border: 1px solid #fff; border-top-right-radius: 8px; border-top-left-radius: 8px; transform: perspective(0.5em) rotateX(5deg); transform-origin: bottom;}.keith li:hover::after { background: #39a3f5;}</style><ul class='keith'> <li>首頁(yè)</li> <li>筆記</li> <li>問(wèn)問(wèn)</li> <li>學(xué)習(xí)</li> <li>設(shè)置</li></ul>
以上就是我收集的一些CSS小技巧，希望能幫助到你，如果你感覺(jué)有用，也請(qǐng)你分享給身邊的小伙伴。
變文字h1{
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
編寫(xiě)css重置時(shí)，添加這些屬性以改善媒體默認(rèn)值。
img, picture, video, svg {
max-width: 100%;
object-fit: contain; /* preserve a nice aspect-ratio */
}
使用列屬性為文本元素制作漂亮的列布局。
p{
column-count: 3;
column-gap: 5rem;
column-rule: 1px solid salmon; /* border between columns */
}
使用 position 居中元素div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
逗號(hào)分隔的列表li:not(:last-child)::after{
content: ',';
}
平滑的滾動(dòng) html {
scroll-behavior: smooth;
}
hyphens 告知瀏覽器在換行時(shí)如何使用連字符連接單詞。可以完全阻止使用連字符，也可以控制瀏覽器什么時(shí)候使用，或者讓瀏覽器決定什么時(shí)候使用。
避免不必要的 span ，并使用偽元素來(lái)設(shè)計(jì)你的內(nèi)容，同樣第一個(gè)字母的偽元素，我們還有第一行的偽元素。
h1::first-letter{
color:#ff8A00;
}
accent-color 屬性能夠使用自定義顏色值重新著色瀏覽器默認(rèn)樣式提供的表單控件的強(qiáng)調(diào)顏色。
Image filled texth1{
background-image: url('illustration.webp');
background-clip: text;
color: transparent;
}
使用 placeholder 偽元素來(lái)改變 placeholder 樣式：
input::placeholder{
font-size:1.5em;
letter-spacing:2px;
color:green;
text-shadow:1px 1px 1px black;
}
使用顏色旋轉(zhuǎn)濾鏡改變?cè)仡伾?/span>
button{
animation: colors 1s linear infinite;
}
@keyframes colors {
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}
clamp() 函數(shù)的作用是把一個(gè)值限制在一個(gè)上限和下限之間，當(dāng)這個(gè)值超過(guò)最小值和最大值的范圍時(shí)，在最小值和最大值之間選擇一個(gè)值使用。它接收三個(gè)參數(shù)：最小值、首選值、最大值。
h1{
font-size: clamp(5.25rem,8vw,8rem);
}
設(shè)置選中元素的樣式。
::selection{
color:coral;
}
將列表樣式類(lèi)型設(shè)置為十進(jìn)制前導(dǎo)零。
li{
list-style-type:decimal-leading-zero;
}
自定義光標(biāo)html{
cursor:url('no.png'), auto;
}
caret-color 屬性用來(lái)定義插入光標(biāo)（caret）的顏色，這里說(shuō)的插入光標(biāo)，就是那個(gè)在網(wǎng)頁(yè)的可編輯器區(qū)域內(nèi)，用來(lái)指示用戶(hù)的輸入具體會(huì)插入到哪里的那個(gè)一閃一閃的形似豎杠 | 的東西。
CSS偽類(lèi) :only-child 匹配沒(méi)有任何兄弟元素的元素。等效的選擇器還可以寫(xiě)成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) ,當(dāng)然,前者的權(quán)重會(huì)低一點(diǎn).
.parent{
display: grid;
place-items: center;
}
text-indent 屬性能定義一個(gè)塊元素首行文本內(nèi)容之前的縮進(jìn)量。
p{
text-indent:5.275rem;
}
CSS 屬性 list-style-type 可以設(shè)置列表元素的 marker（比如圓點(diǎn)、符號(hào)、或者自定義計(jì)數(shù)器樣式）。
li{
list-style-type:'';
}
作者：knaagar 譯者：前端小智 來(lái)源：dev 原文：https://dev.to/devsyedmohsin/css-tips-ad-tricks-you-will-add-to-cart-163p
歡迎長(zhǎng)按圖片加刷碗智為好友，我會(huì)第一時(shí)間和你分享前端行業(yè)趨勢(shì)，學(xué)習(xí)途徑，搞怪趣事，生活中的另一面幽默等等。新的一年我們一起洗刷刷?。。。。?！學(xué)好Web前端，該從哪里入手學(xué)習(xí)呢？零基礎(chǔ)學(xué)習(xí)Web前端學(xué)習(xí)路線(xiàn)圖從哪里可以找到呢？小編整理了完整的零基礎(chǔ)Web前端學(xué)習(xí)路線(xiàn)分享給大家。
適合零基礎(chǔ)學(xué)員的Web前端學(xué)習(xí)路線(xiàn)分享給大家：
1.HTML5介紹
內(nèi)容包括：互聯(lián)網(wǎng)發(fā)展趨勢(shì)、H5語(yǔ)言的優(yōu)勢(shì)、簡(jiǎn)單易學(xué)人人都能編程、H5就業(yè)和薪資情況、H5常見(jiàn)的項(xiàng)目與產(chǎn)品、H5的未來(lái)與方向。
2.HTML基礎(chǔ)
內(nèi)容包括：HTML簡(jiǎn)介與歷史版本、常用開(kāi)發(fā)軟件、常見(jiàn)標(biāo)簽與屬性、表格與表單、標(biāo)簽規(guī)范與標(biāo)簽語(yǔ)義化、實(shí)戰(zhàn)：網(wǎng)頁(yè)結(jié)構(gòu)布局。
3.CSS基礎(chǔ)
內(nèi)容包括：css簡(jiǎn)介與基本語(yǔ)法、常見(jiàn)的各種樣式屬性、CSS選擇器與標(biāo)簽類(lèi)型、理解盒子模型與CSS重置、浮動(dòng)與定位、利用photoshop工具測(cè)量樣式、HTML+CSS開(kāi)發(fā)網(wǎng)頁(yè)、實(shí)戰(zhàn)：高仿電商首頁(yè)效果。
4.CSS3基礎(chǔ)
內(nèi)容包括：css3常見(jiàn)樣式、css3選擇器、變形與動(dòng)畫(huà)、3D效果與關(guān)鍵幀、彈性盒模型。
5.移動(dòng)端布局
內(nèi)容包括：移動(dòng)端基本概念、viewport窗口設(shè)置、移動(dòng)端布局方案、rem、vh、vw等單位、響應(yīng)式布局、bootstrap框架。
6. JavaScript基礎(chǔ)
內(nèi)容包括：JS簡(jiǎn)介、JS變量、數(shù)據(jù)類(lèi)型與類(lèi)型轉(zhuǎn)換、運(yùn)算符與優(yōu)先級(jí)、流程控制-if..else流程控制-switch...case、流程控制-while、do..while、for循環(huán)、break、continue語(yǔ)法、函數(shù)定義與調(diào)用、全局變量與局部變量、函數(shù)傳參與返回值、函數(shù)作用域與變量作用域。
而且還有DOM的基本操作、定時(shí)器使用、this指向與修改指向、數(shù)組、字符串等方法操作、時(shí)間對(duì)象與正則對(duì)象、掌握常見(jiàn)BOM操作、常見(jiàn)事件與事件細(xì)節(jié)、JSON與AJAX、JSONP跨域操作、前端cookie的使用、實(shí)戰(zhàn)：JS配合HTML與CSS完成電商項(xiàng)目。
7.jquery框架
內(nèi)容包括：jquery框架介紹及優(yōu)勢(shì)介紹、jquery核心思想、jquery常見(jiàn)方法、jquery動(dòng)畫(huà)操作、jqueryAJAX操作、jquery工具方法、利用jquery快速開(kāi)發(fā)網(wǎng)頁(yè)。
8.PHP基礎(chǔ)
內(nèi)容包括：PHP簡(jiǎn)介與基本語(yǔ)法、mysql數(shù)據(jù)庫(kù)及sql語(yǔ)法、apache服務(wù)器與集成開(kāi)發(fā)工具、PHP鏈接數(shù)據(jù)庫(kù)、PHP與AJAX交互、實(shí)戰(zhàn)：留言板、登錄、注冊(cè)等。
9.H5基礎(chǔ)項(xiàng)目
內(nèi)容包括：項(xiàng)目簡(jiǎn)介、項(xiàng)目功能演示、項(xiàng)目劃分及框架、編寫(xiě)HTML頁(yè)面結(jié)構(gòu)、設(shè)置CSS樣式、添加JS交互、可選框架：bootstrap、jquery、PHP等、項(xiàng)目調(diào)試及兼容、項(xiàng)目驗(yàn)收。
當(dāng)然會(huì)了這些技能就可以勇敢的出去找工作了。不過(guò)，實(shí)踐是學(xué)習(xí)Web前端技術(shù)歷程中最極其重要的一環(huán)。脫離了實(shí)踐，是學(xué)不好實(shí)踐的。最好是找一些真實(shí)的項(xiàng)目來(lái)演練，看看自己技能的掌握程度。這些是小編總結(jié)的Web前端的學(xué)習(xí)路線(xiàn)，希望能夠幫助更多的初學(xué)者學(xué)好Web前端。學(xué)習(xí)Web前端是一個(gè)長(zhǎng)久的過(guò)程，努力和堅(jiān)持是不可少的關(guān)鍵因素，祝大家都能夠?qū)W有所成！
Web前端的發(fā)展如日中天，只要你有足夠的熱情和興趣，并且肯努力，學(xué)好Web前端前景自然不錯(cuò)。
免責(zé)聲明：內(nèi)容和圖片源自網(wǎng)絡(luò)，版權(quán)歸原作者所有，如有侵犯您的原創(chuàng)版權(quán)請(qǐng)告知，我們將盡快刪除相關(guān)內(nèi)容。
IT行業(yè)、互聯(lián)網(wǎng)、開(kāi)發(fā)語(yǔ)言（Java、前端HTML5、Python、UI/UE、云計(jì)算、自動(dòng)化測(cè)試、大數(shù)據(jù)、人工智能、物聯(lián)網(wǎng)、游戲開(kāi)發(fā)、網(wǎng)絡(luò)安全、GO語(yǔ)言、PHP）相關(guān)資訊，大連千鋒會(huì)第一時(shí)間送到大家身邊，也可以關(guān)注微信公眾號(hào)【dalianqianfengjiaoyu】了解相關(guān)行業(yè)資訊。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
