HTML结构
该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮
CSS样式
以下是该css3点击按钮特效的通用CSS样式：
插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：
上面的CSS代码可以生成如下图的动画效果：
在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。
在“Stoja”效果中使用了CSS clip-path属性，这个效果也需要浏览器的支持才能看得到的。
CSS3中有关于border的属性我们一起学习完了圆角border-radius和边框颜色border-color，只剩下最后一个边框图片border-image。今天我们就一起来学习这个border-image的属性。学习完这个border-image以后，大家一定会很兴奋，因为他改变我了们以往设置border的效果，以前我们border只能简单的设置一些纯色或几种简单的线型（如solid,dotted,double,dashed等）那么我们以后就可以通过border-image这个属性改变以前的一切，可以给边框设置不同的图片效果。简单的来介绍一下border-image的参数，让大家在脑海中有下初步的概念
1、none:是border-image的默认值，如果取值为none时，表示边框无背景图片；
2、<image>：设置border-image的背景图片，这个跟background-image一样，使用绝对或相对的url地址，来指定背景图片；
3、<number>：number是一个数值，用来设置边框的宽度，其单位是px，其实就像border-width一样取值，可以使用1~4个值，其具体表示四个方位的值，大家可以参考border-width的设置方式；
4、<percntage>：percntage也是用来设置边框的宽度，跟number不同之处是，其使用的是百分比值来设置边框宽度；
5、stretch,repeat,round:他们是用来设置边框背景图片的铺放方式，类似于background-position，其中stretch是拉伸，repeat是重复，round是平铺，stretch为默认值。
大家看到上面的参数介绍后一定会想起background-image这个属性。是的，这两者之间确实有一些类似之处，其中包括对图片的引用和排列方式都是一样的原理。为了更好的理解,先暂时把border-image在语法的表达形式进行属性的分解来阐述（实际应用中是不能分解的），这样就可以把border-image分解为：
1、引入图片：border-image-source
2、切割引入的图片：border-image-slice；:
3、边框的宽度：border-image-width；
4、图片的排列方式：border-image-repeat。
下面就详细的来介绍上面的四个属性的使用方法和其各自的特性，从而更好的深化border-image的相关知识点。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-border-image © w3cplus.com
