css3的使用已经分布在各种网站上,其用途对于前端开发人员来说有很大的帮助,比如之前的圆角矩形,需要使用背景图片来完成,现在只需使用border-radius:5px;便可以做出圆角边框的效果,今天来记录下css3一些常用的属性。 盒子属性:边框圆角:radius,边框阴影:box-shadow 边框:border-radius:top-left top-right bottom-right bottom-left; 这里先赘述一下盒子边框样式设计的先后顺序 border-radius:10px;
border-top-left-radius:10px;
盒子阴影 box-shadow:h-shadow v-shadow blur color inset/outset box-shadow:5px 5px 5px red; 默认是外阴影outset
box-shadow:5px 5px 5px red inset;
当然可以设置多个阴影只需在之后面加','。 box-shadow:5px 5px 5px red inset,-5px -5px 5px green;
转换2D/3D:transform:rotate,scale,skew 浏览器的支持:IE10,firfox,opera 为了达到各个浏览器的兼容性.请使用一下方法
目前范围仅仅在2d,所有先上2d示例 transform:rotate(Xdeg)定义角度旋转 transform:rotate(0deg) transform:rotate(45deg)
transform:rotate(Xdeg)定义角度旋转 实用性那就智者见智了。 transform:scale(x):缩放参数为缩放的倍数 transform:scale(1.5) 注:指在原基础的x,y方向缩放 skew() 方法 transform:skew(0deg,45deg) 通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数: css3的动画:animate animation:myanimation 5s linear infinite animation:myanimation 5s linear infinite;(指定的帧名,执行的时间间隔,效果,执行次数)
原文地址:http:///node/56 更多效果:url:http://2.liteng.sinaapp.com/HTML5/index.html 下篇将记录css3选择器的使用方法 if you don't try,you will never know! 标签: css3 |
|
来自: 昵称10504424 > 《工作》