css3新增效果有:
1.边框属性:
border-radius:圆角边框
/*设置4个角依次未左上,右上,右下,左下*/
border-radius:25% 25% 25% 25%;
/*设置所有角*/
border-radius:50%;
border-image:图片边框
border-image: url(./img/logo.png);
box-shadow:盒子阴影
box-shadow: 1px 1px 1px 1px ;
boder-color:边框颜色
border-color: red;
2.文本属性
text-shadow:文本阴影
text-shadow: 5px 5px 5px green;
word-wrap:自动换行
word-wrap:break-word;
3.背景属性
background-size:背景图片大小
background-size: 100%;
background-size: 100px 100px;
background-origin :属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域
4.rgba和透明度
background-color: rgba(red, green, blue, alpha);
alpha代表透明度
background-color: rgba(red, green, blue, alpha);
5.新增动画效果
1.transform变换效果:
它可以将元素实现旋转、缩放和平移的功能。
属性值:(1)transform ;(2)transform-origin:transform-origin 属性可以设置变换的起点。默认情况下,使用元素的中心作为起点
2、animation动画效果
animation 实现动画效果主要由两个部分组成:
1、通过类似 Flash 动画中的关键帧声明一个动画;
2、在 animation 属性中调用关键帧声明的动画。