今天小编跟大家讲解下有关分享几个CSS小众但炫酷的技巧 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关分享几个CSS小众但炫酷的技巧 的相关资料，希望小伙伴们看了有所帮助。
1. 黑白图像这段代码会让你的彩色照片显示为黑白照片 是不是很酷 复制代码代码如下:img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}
2.页面顶部阴影下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果：复制代码代码如下: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;}</p><p>
3.所有一切都垂直居中要将所有元素垂直居中 太简单了：复制代码代码如下:html, body { height: 100%; margin: 0;} body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;}看 是不是很简单。注意：在IE11中要小心flexbox。
4.文本渐变文本渐变效果很流行 使用 CSS3 能够很简单就实现：复制代码代码如下: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)));}
5.禁用鼠标事件CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件 例如 一个连接如果设置了下面的样式就无法点击了。复制代码代码如下:.disabled { pointer-events: none; }
6.模糊文本简单但很漂亮的文本模糊效果 简单又好看！复制代码代码如下:.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
以上就是给大家分享的几个CSS小众但炫酷的技巧 是不是对大家在前端开发的时候很实用呢 如果觉得实用的话可以收藏哦 方便大家日后参考使用 谢谢大家对AIDI的支持。
来源：爱蒂网
