您现在的位置是:首页 > 网页设计素材

CSS3实用效果归纳

2018-09-26网页设计素材

简介css3实用效果归纳,圆角、对角、颜色渐变、css3制作按钮、按钮背景颜色渐变、文字投影、旋转、缩放等特效

一、圆角:

圆角

border-radius:10px;

border-radius:20px 0 20px 0;

border-radius:20px 0 20px 0;

css3圆角具体属性请看 《CSS3边框圆角的实现

二、渐变

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边框(圆角、阴影、图片)的实现

四、文字阴影:

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)

更多关于css3 transform旋转、缩放、倾斜等属性请看《css3 transform 常用属性详解》

郑重声明:

本站所有活动均为互联网所得,如有侵权请联系本站删除处理

评论

评论插件