css为html标记语言提供了一种样式描述，定义了其中元素的显示方式。css在web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。现如今在css的基础上又新出了css3，在前端的工作中css还是很重要的，下面我们就和大家分享一些css制作的小功能的实例。
css@supports
在使用一些浏览器可能没有的特性时，每一个优秀的前端开发者都需要进行特性测试。特性测试一直以来都是由javascript来做的，许多人使用modernizr，一个由许多测试良好的案例构成的优秀实用工具，来做特性测试。一个新api：@supports，不管怎样，已经出现在开发人员面前，它能让你用css来做特性测试。以下是一些@supports如何工作的简单例子：
代码如下:
/* basic usage */@supports(prop:value) {/* more styles */} /* real usage */@supports (display: flex) {p { display: flex; }} /* testing prefixes too */@supports (display: -webkit-flex) or(display: -moz-flex) or(display: flex) {section {display: -webkit-flex;display: -moz-flex;display: flex;float: none;}}
这个新的@supports特性，同样有一个对应的javascript版本，但已经过期了，我们期待着早点使用它！
css滤镜
写一个服务来修改图片的色调，然后你可以以数十亿美元把它卖给facebook。当然，那是一件很简单的事，但是写图像滤镜并不是一门科学。我到mozilla 的第一个星期写的一个小程序（得了奖，额，我只是随便说说而已）用了一些基于js的数学用canvas来创建图像滤镜，但现在我们用css就能创建图像滤镜了。
代码如下:
/* simple filter */.myelement {-webkit-filter: blur(2px);} /* advanced filter */.myelement {-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);}
这个类型的滤镜只是改变了下图像的原来样子而已，保存或导出图像时并没有用所说的滤镜，但当你需要给照片美化或处理海报时这很好用。
pointr events和 bricking clicks
css的pointr events属性提供了一个方法来有效的禁用一个元素，正因为如此，通过javascript，点击一个链接不会触发一个单击事件：
代码如下:
/* do nothing when clicked or activated */.disabled { pointer-events: none; } /* this will _not_ fire because of the pointer-events: none application */ document.getelementbyid("disabled-element").addeventlistener("click", function(e) {alert("clicked!");});
在上面的例子中，由于css pointer-events值的原因，单击事件将不会触发。我发现了它的巨大作用，你不需要每处都检查classname或属性来确保一些元素是否已经禁用了。
折叠、展开菜单
css让我们可以创建过渡效果和动画，但是很多时候我们需要javascript库来帮助我们修改一些东西和控制动画。一个很流行的动画就是折叠、展开菜单效果，很多人都不知道只用css就可以实现！
代码如下:
/* slider in open state */.slider {overflow-y: hidden;max-height: 500px; /* approximate max height */ transition-property: all;transition-duration: .5s;transition-timing-function: cubic-bezier(0, 1, 0.5, 1);} /* close it with the "closed" class */.slider.closed {max-height: 0;}
max-height的一个巧妙使用能让元素按想要的效果来折叠和展开。
css计数器
“计数器”这个术语在网络上表示的意思经常让我们傻笑，但css 计数器是另一件更让我们傻笑的事。css计数器允许开发人员在指定的元素上用:before和:after来增加一个计数器：
代码如下:
/* initialize the counter */ol.slides {counter-reset: slidenum;} /* increment the counter */ol.slides > li {counter-increment: slidenum;} /* display the counter value */ol.slides li:after {content: "[" counter(slidenum) "]";}
你经常见到css计数器被用在幻灯片效果上，和像表单内容的列表上。
unicode css样式名
有许多css最好的实践文档，它们都是由如何给css样式命名开始的。你永远不会见到有个文档说的的用unicode符号来命名你的样式：
代码如下:
.ಠ_ಠ {border: 1px solid #f00;background: pink;} .❤ {background: lightgreen;border: 1px solid green;}
请别用这些符号。除非你能行！
css圆
css三角形是一个技术活，css圆也同样如此。通过滥用css border-radius，你能创建很完美的圆！
代码如下:
circle { border-radius: 50%; width: 200px; height: 200px; /* width and height can be anything, as long as they're equal */ }
你可以给你的圆增加渐变，你甚至可以使用css动画来让你的圆动起来！css即将有更多统一的api提供给这些图形，但现在你可以用这种方法来创建圆了。
以上就是几种纯css制作的小功能实例，希望能帮助到大家。
相关推荐：
css3 画各种基本图形小技巧
使用 css 3 制作长投影
几个好用的css函数小技巧
以上就是几种纯css制作的小功能实例的详细内容。