CSS3技巧之形状（切角效果）

html-css043

CSS3技巧之形状（切角效果）,第1张

上一小节给大家分享了平行四边形的实现方法，此时我们来说一下切角效果的实现方法。

实现切角效果需要掌握的几个点包括： css渐变、background-size、条纹背景

直角切角

先实现一个简单的，比如让一个矩形，右下角切掉。实现该功能可以使用强大的渐变功能，有了渐变基础，应该不难理解。

注：background: #58a不是必须的，加上它是为了将其作为回退机制。

实现两个切角，左右下角各一个。一层渐变肯定不行，需要两层。按想法一步步实现，首先可能会这样写，想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。

可以看到，效果并没有实现，原因是两层渐变都会填满整个元素，因此它们会相互覆盖。需要让它们缩小一点，使用background-size让每层渐变分别只占据整个元素的一半。

依然没有达到效果，这是因为没有添加background-repeat属性，因而每层渐变图案各自平铺了两次。

好了，现在实现了。如果要四个角的话，就要四层渐变了。

就这样一个切角效果就实现了，后还会补充更多多边形效果，大家多多支持，多多鼓励！

简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。

1、CSS进行渐变背影的设置，在background中添加了linear-gradient线性渐变，

background: linear-gradient(yellow 0%, #000 80%)/*从0%黄色到80%黑色的渐变*/

2、CSS 3D

perspective:查看视图的位置，如拍照时的镜头位置一样。

transform-style中preserve-3d，设置了此属性时，将子元素包裹在一个3D视图里。

3、CSS animation

说到动画就不得不说jQuery的animation。但有了CSS3后就再也不用JS进行制作动画了。

keyframes定义帧动画，可根据百分比进行设置，也可利用from和to的方式进行设置。

利用animation引用定义好的keyframes帧动画。animation:rotate 20s infinite linear/*设置引用的动画，动画时间，动画的timing-function,动画方式*/

4、CSS filter

fileter并非IE的过滤器，是CSS3中新添加的属性。

包含效果有：grayscale灰度，sepia褐色，saturate饱和度,hue-rotate色相旋转,invert反色,opacity透明度,brightness亮度,contrast对比度,blur模糊,drop-shadow阴影.

挤压效果就是利用filter中的blur加saturate混合而来

CSS3 新特性

包括

CSS3 选择器（Selector）

@Font-face 特性、

Word-wrap &Text-overflow 样式

Text-decoration

多列布局（multi-column layout）

边框和颜色，颜色支持透明度（color, border）

渐变效果（Gradient）

阴影（Shadow）和反射（Reflect）效果

盒子模型

Transitions, Transforms 和 Animation

比如：@Font-face 特性

@font-face {

font-family: BorderWeb

src:url(BORDERW0.eot)

}

@font-face {

font-family: Runic

src:url(RUNICMT0.eot)

}

.border { FONT-SIZE: 35pxCOLOR: blackFONT-FAMILY: "BorderWeb" }

.event { FONT-SIZE: 110pxCOLOR: blackFONT-FAMILY: "Runic" }

更多参考：http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/