css3新特性

1、边框

  • border-radius:圆角

  • box-shadow:阴影

  • border-inage:使用图片绘制边框

    div
    {
    box-shadow: 10px 10px 5px #888888; //右 下 虚化
    }
    div
    {
    border-image:url(border.png) 30 30 round;
    -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox /
    -webkit-border-image:url(border.png) 30 30 round; /
    Safari 和 Chrome /
    -o-border-image:url(border.png) 30 30 round; /
    Opera */
    }

2、背景

  • background-size 规定背景图片的尺寸
  • background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

3、文本效果

text-shadow
word-wrap属性允许您允许文本强制文本进行换行

4、字体

@font-face
必需:font-family src
可选:font-stretch font-style font-weight unicode-range

5、2D 转换transform

您将学到如下 2D 转换方法:

translate():通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数

rotate()
scale()
skew():通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
matrix()matrix() 方法把所有 2D 转换方法组合在一起。

matrix(): 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

6、3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

学到其中的一些 3D 转换方法:

rotateX()
rotateY()

7、CSS3 过渡transition

通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

8、CSS3 @keyframes 规则

如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}
@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

CSS3动画属性
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3
animation-fill-mode 规定对象动画时间之外的状态。

9、css3选择器

CSS选择器复习
通用选择器:* 选择到所有的元素
选择子元素:> 选择到元素的直接后代(第一级子元素)
相邻兄弟选择器:+ 选择到紧随目标元素后的第一个元素
普通兄弟选择器:~ 选择到紧随其后的所有兄弟元素

CSS3结构选择器
:nth-child 选择指定索引处的子元素
nth-child(n) 父元素下的第n个子元素
nth-child(odd) 奇数子元素(同nth-child(2n-1))
nth-child(even) 偶数子元素(同nth-child(2n))
nth-child(an+b) 公式
(nth-child从1开始)
:nth-last-child(n) 倒数第n个子元素
:nth-of-type(n) 父元素下的第n个指定类型的子元素
:nth-last-of-type 父元素下的倒数第n个指定类型的子元素
:first-child 选择父元素下的第一个子元素
:last-child 选择父元素下的最后一个子元素
:only-child 选择父元素下唯一的子元素
:only-of-type 选择父元素下指定类型的唯一子元素
:root 选择文档的根目录,返回html

10、css3渐变

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义
语法:
background: linear-gradient(direction, color-stop1, color-stop2, …);
#grad {
/* Safari 5.1 - 6.0 /
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/
Opera 11.1 - 12.0 /
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/
Firefox 3.6 - 15 /
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/
标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值