最近闲暇时间在看鑫爷的CSS 世界 http://www.cssworld.cn/ , 内容真的是非常精彩, 很多细节分析的非常透彻, 值得推荐. 在日常开发中实现某种效果有很多方式, 但是下面的 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: 20px 10px;
- 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;
- }
来源: http://www.jianshu.com/p/63964f90fd6d