CSS3实用效果归纳
一、圆角:
圆角
border-radius:10px;
border-radius:20px 0 20px 0;
border-radius:20px 0 20px 0;
二、渐变
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff45c), to(#ec6941));
background: -moz-linear-gradient(top, #fff45c, #ec6941);
第一句是谷歌的语法,第二句是火狐的语法。
css3 颜色渐变
三、投影:
css3 投影
box-shadow: 5px 5px 5px 0 #ccc;
css3 内部阴影
box-shadow: 2px 1px 1px 0px #333 inset;
水平偏移|垂直偏移|模糊距离|扩散距离|color |inset 是一个关键字,在使用时指示阴影是内部阴影,而不是外部阴影。
四、文字阴影:
css3文字阴影
text-shadow:#ff0000 1px 1px 1px
五、旋转:
-webkit-transform: rotate(-30deg);
七、缩放:
CSS3可以对网页任意元素进行大小缩放,尤其用在一套大小不一的logo图片上特别方便。
-webkit-transform:scale(0.7, 0.7);transform:scale(0.7, 0.7)
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:dacesmiling@qq.com