CSS3如何做这种小凹陷和小凸出的效果？？

html-css037

CSS3如何做这种小凹陷和小凸出的效果？？,第1张

<div class="tip1">这是个小提示</div>

<div class="tip2">这是个小提示</div>

<style>

.tip1{width:150pxheight:40pxline-height:40pxbackground:#FA5889font-size: 14pxcolor:#ffftext-align: centerposition: relativemargin:50pxfloat: left}

.tip1:after{content:" "border:solid 10px transparentborder-top:solid #FA5889 10pxwidth:0pxheight:0pxposition: absolutedisplay: blockleft:65pxbottom:-10}

.tip2{width:150pxheight:40pxline-height:40pxbackground:#37A7D7font-size: 14pxcolor:#ffftext-align: centerposition: relativemargin:50pxfloat: left}

.tip2:after{content:" "border:solid 5px transparentborder-bottom:solid #fff 5pxwidth:0pxheight:0pxposition: absolutedisplay: blockleft:65pxbottom:0}

</style>

css3功能还是相当强大的，但是因为兼容性的问题，可能会导致部分IE浏览器不兼容。（IE678的滚蛋）

css3最常用的是：

transiform

放大缩小scale（X）X是倍数，大于1就放大。

倾斜rotate（Xdeg）X是角度

拉伸skew（Xdeg）X角度。

@keyframe    自定义动画，分帧调整动画。

transition：all 0.5s ease

过渡动画效果。（例：整体效果    0.5s完成      方式匀速）

这几种是常用的css3动画效果