开个坑…写点平时积累、收集到的CSS技巧吧（半娱乐向）
考虑到IE8等更为古老的浏览器渐渐退出舞台
文中所记录的技巧更偏向于更新、更高级的CSS特性
关于某些属性在浏览器兼容方面的情况，可以浏览caniuse.com
文字模糊效果
p {
color: transparent;
text-shadow: 0 0 5px #000;
}
给文字一个透明的颜色，然后依靠黑色阴影来给出一种模糊，存在残影的感觉，效果很赞，关键代码很简单。修改text-shadow属性的第三个参数，可以设置残影的模糊度。
让鼠标指针消失(一般没什么卵用的恶搞)
*{
cursor: none !important;
}
这个属性很多人都知道，没什么技术含量……但是拿来恶搞一下还是不错的~~
:empty选择器
li {
padding: 20px;
background-color: #ccc;
}
li:empty {
display: none;
}
<ul>
<li>这里有文字</li>
<li></li>
<li>asdfasdf</li>
</ul>
做网页的时候经常有这种情况。有的标签里面文字为空，但是这个标签被应用上特定的样式，即便文字为空还是会展现出来。如果想要避免这种情况。你可以尝试使用CSS3的选择器:empty
菱形图片与裁切路径
假设要用css来实现以下的效果，大家会想怎样的办法？
菱形图片
大部分人的想法应该是用一个div把图片包裹起来。然后将外侧的div顺时针旋转45度，但图片也会跟着外侧的div旋转，这不是我们想要的结果。于是我们只好再将图片逆时针旋转45度。这样图片看起来就正常了。不过还有一个问题在于，旋转过后，图片的宽度理应要等于外侧div对角线的长度，也就是要乘以√2，所以我们将图片再放大√2倍。根据上述思维，我们得到了以下代码：
.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
width: 100%;
transform: rotate(-45deg) scale(1.42);
}
<div class="picture">
<img src="xxx.jpg">
</div>
以上方案的实现稍微有点复杂。而且存在以下缺点：
- 难以处理非正方形图片
- 需要额外的HTML元素（上例中的div）
- 代码量较大
接下来看看另一种基于裁切路径(clip-path)实现的方案。
img {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
这个方案相比方案1看起来愉悦了不少。但是……浏览器兼容性就比较惨了……
clip-path兼容性
IE全部不支持，android4.4以前的浏览器也完全不支持，其它浏览器上可能也或多或少存在些问题。不过这个方法真的非常简洁，而且可以很好地适应非正方形的图片。
关于clip-path的更多信息，可以参考MDN上的文档。clip-path属性介绍
背景动画效果
使用线性渐变与background-position来进行背景动画的处理。
div {
width: 300px;
height: 200px;
background-image: linear-gradient(#ccc, #000, aqua);
background-size: auto 200%;
background-position: 0 100%;
transition: all 0.5s;
}
div:hover {
background-position: 0 0;
}
calc属性
在网页布局的过程中，我们经常会用到百分比这一属性。但是不同的设备分辨率不同，同样是100%的宽度自然就可能对应不同的px。假设有一个需求，需要设置一个元素为屏幕宽度的50%+20px。面对此问题，往往需要借助js来完成这一需求。
为了解决这种情况，calc闪亮登场啦。
div {
width: calc(50% + 20px);
height: calc(50px + 10em - 2rem);
}
calc支持百分比和px、em的混合运算，能给我们提供许多的便利。这边着重注意下，运算符号和长宽数值要有空格隔开
浏览器支持情况可以参考caniuse
在安卓上的支持还是有点捉急啊…毕竟android4.x的用户还是有一定数量的…
vh与vw
div {
width: 10vw;
height: 15vh;
}
vw和vh都是相对viewport的。1vw等于视窗宽度的1%，1vh等于视窗高度的1%。
个人感觉vh的实用性还是蛮不错的。因为在使用css布局的时候，高度和百分比结合的情况相对会麻烦点。
其实还有一种rem布局的方案，就是通过设置根元素的font-size，让一个rem的宽度固定等于屏幕宽度的一定比例，如1rem=10%屏幕宽度。然后用rem来作为元素宽、高的计量单位。
其实最近新出的微信小程序，布局中有一个叫做rpx的东西。思想和rem布局就十分类似。
无非是1rpx = 屏幕宽度 / 750
最后看下兼容吧vw兼容性
老安卓4.3还是不支持
网友评论