最近閑暇時間在看鑫爺的《CSS世界》，內容真的是非常精彩，很多細節分析的非常透徹，值得推薦。在日常開發中實現某種效果有很多方式，但是下面的css code我以前都很少用到，原來css還可以這么玩 ??。
實現hover改變成另一張圖片效果
/**css**/
img: hover {
content: url( laugh-tear. png);
}
/**html code**/
< img src=" laugh. png">
局限性：content 屬性 改變 的 僅僅是 視覺 呈現， 當 我們 以 右鍵 或 其他 形式 保存 這張 圖片 的 時候， 所 保存 的 還是 原來 src 對應 的 圖片。
顯示網站logo
< h1>logo</ h1>
h1 {
content: url( logo. svg);
}
優點：
1，不會影響網站SEO。
2，使用.svg矢量圖為了適應移動 端 retina 屏幕（如果用.svg會模
糊）。
注：千萬不要自以為是地把重要的文本信息使用content 屬性生成，因為這對可訪問性和SEO都很不友好，content 屬性只能用來生成 一些 無關緊要的內容， 如裝飾性圖形或者序號之類； 同樣，也不要擔心 原本重要的文字信息會被content替換，替換的僅僅是視覺層。
設置內容無法選中、無法復制
user-select: none
“三道 杠” 小 圖標 示意
image.png
.icon-menu {
display: inline-block;
width: 140px;
height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentColor;
background-clip: content-box;
}
雙層 圓點 圖形 示意
image.png
.icon-dot {
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid;
border-radius: 50%;
background-color: currentColor;
background-clip: content-box;
}
去掉最右邊的margin-right：20
image.png
/**方案一：使用css3 nth-of-type屬性（不考慮兼容IE8**/
li: nth-of-type(3n) {
margin-right: 0;
}
/**方案二：通過給父容器添加margin屬性， 增加容器的可用寬度來實現**/
ul {
margin-right: -20px;
}
ul > li {
float: left;
width: 100px;
margin-right: 20px;
}
margin：auto的妙用
水平垂直居中
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.father {
position: relative;
width: 300px;
height: 150px;
border: red solid 1px;
}
.son {
position: absolute; /**key code here**/
background-color: orange;
width: 100px;
height: 100px;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto; /**key code here**/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
左／右對齊效果。
image.png
...
.father {
width: 300px;
height: 200px;
border: red solid 1px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin-right: 50px; /**左對齊margin-right、margin-left值交換**/
margin-left: auto; /**key code here**/
}
...
水平居中
image.png
...
.father {
width: 300px;
height: 200px;
border: red solid 1px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin-right: auto; /**key code here**/
margin-left: auto; /**key code here**/
}
...
垂直居中
image.png
...
.father {
width: 300px;
height: 200px;
writing-mode: vertical-lr; /**key code here**/
border: red solid 1px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin: auto; /**key code here**/
}
...
實現最高渲染性能的去除下邊框css
div {
border: 1px solid;
border-bottom: 0 none; /**key code here**/
}
優雅的增加icon按鈕點擊區域
點擊 區域 大小 從 16 × 16 一下子 提升 到 38 × 38，
image.png
.icon- clear {
width: 16px;
height: 16px;
border: 11px solid transparent; /**key code here**/
}
最高性能等邊三角圖形繪制
image.png
div {
width: 0;
border: 10px solid;
border-color: #f30 transparent transparent;
}
最高性能等腰三角圖形繪制
image.png
div {
width: 0;
border-width: 50px 34px;
border-style: solid;
border-color: #f30 transparent transparent;
}
又或者是這種三角形（對話框氣泡下的三角形）
image.png
div {
width: 0;
border-width: 20px 10px;
border-style: solid;
border-color: #f30 #f30 transparent transparent;
}
最高性能梯形圖形繪制
image.png
div {
width: 10px;
height: 10px;
border: 10px solid;
border-color: #f30 transparent transparent;
}
逼真 的 3D 效果
image.png
div {
width: 10px;
height: 10px;
border: 10px solid;
border-color: #f30 #00f #396 #0f0;
}
被遺忘的ex單位
實現箭頭居中文字垂直方向（不受字體、字號影響）
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.icon-arrow {
display: inline-block;
width: 20px;
height: 1ex;
background: url(arrow.svg) no-repeat center/20px 20px;
}
</style>
</head>
<body>
<div style="font-size: 18px">
箭頭居中對齊
<i class="icon-arrow"></i>
</div>
</body>
</html>
永遠居中的dialog（可兼容到IE7）
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.container {
position: fixed;
top:0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}
.container:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content {
width: 240px;
height: 120px;
padding: 20px;
}
.dialog {
display: inline-block;
vertical-align: middle;
border-radius: 6px;
background-color: #fff;
font-size: 14px;
white-space: normal;
}
</style>
</head>
<body>
<div class="container">
<div class="dialog">
<div class="content">這dialog永遠居中</div>
</div>
</div>
</body>
</html>
去除頁面默認滾動條(PC端有效)
/**good code**/
html {
overflow: hidden;
}
/**bad code**/
html, body {
overflow: hidden;
}
