css3是css2的升级,相较于css2多了动画,2D/3D的转化,这是两者最大的区别
一、css3边框(border)
1、border-radius 圆角
div
{
border:2px solid;
border-radius:25px;
}
也可对四个角设定不同的值,例如;
border-radius: 10px 20px 30px 40px;
border-radius: 10px 20px 30px;
也可以单独对某一个角设角度,例如:
border-bottom-left-radius: 20px;
2、box-shadow 阴影
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 50px #888888 inset;
}
其中box-shadow后的第一个和第二值分别为阴影的相对左右和上下的位置,为0 0时可以不带单位px,此时阴影在正后方,其余数值必须带单位,第三个数值的意义是阴影的扩散范围。inset是将阴影设置成向内扩散。
3、border-image 边框图片
div
{
border-image:url(border.png) 30 30 round;
}
其中:round 指图像平铺(重复)来填充该区域;stretch 指图像被拉伸以填充该区域
二、css3背景
1、background-size
指定背景图像的大小
自定义大小:
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
伸展背景图像完全填充内容区域:
div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
2、background-origin
指定背景图像的位置区域,content-box, padding-box,和 border-box区域内可以放置背景图像。
例:在content-box中放入背景图片
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
注:css3中可以添加多个背景图像
属性:
background-clip 规定背景的绘制区域。
background-origin 规定背景图片的定位区域。
background-size 规定背景图片的尺寸
三、css3渐变
1、线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
格式 :background: linear-gradient(direction, color-stop1, color-stop2, …);
分别方向(默认从上到下),颜色1,颜色2。。。
也可以定义一个角度,而不用预定义方向(如to bottom、to top、to right、to left、to bottom right,等等)。
也可以使用角度来控制渐变方向
逆时针方向计算,0deg 是从下到上的渐变,90deg是从左到右的渐变。
格式:background: linear-gradient(angle, color-stop1, color-stop2);
同时当指定颜色的百分比时,颜色是不均匀分布,即按照百分比分布。未指定时均匀分布
使用透明度(Transparency):
rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
#grad1 {
height: 200px;
background-image: linear-gradient(to right, rgba(255,0,0,1), rgba(266,0,0,0));
}
repeating-linear-gradient() 函数用于重复线性渐变
格式:background: repeating-linear-gradient(red, yellow 10%, green 20%);
2、径向渐变(Radial Gradients)- 由它们的中心定义
格式:background: radial-gradient(center, shape size, start-color, …, last-color);
默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
closest-side:半径为从圆心到最近边
closest-corner:半径为从圆心到最近角
farthest-side:半径为从圆心到最远边
farthest-corner:半径为从圆心到最远角
四、css3的文本效果
1 text-shadow 文本阴影
格式样例:
h1
{
text-shadow: 10px 5px 50px #FF0000;
}
其中第一个值和第二个值分别是阴影的相对左右和上下的位置,第三个值是阴影扩散范围
2、word-wrap 换行
格式: word-wrap:break-word;
自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字,即将单词强行断开
break-all 截断换行
keep-all 全单词换行
单行溢出省略语句 :
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
多行溢出省略
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp:3;
-webkit-box-orient: vertical;
五、css的2D转换transform
1、translate() 平移
translate() 默认x
translatex(100px)
translatey(100px)
translatez(100px)
translate3d(100px,20px,0)
2、rotate() 旋转
正数时顺时针旋转,负数时逆时针
rotate z 默认
rotatex
rotatey
rotatez
3、scale() 缩放
scale
scale(1)
scale(1,2)
4、skew() 拉伸
skew
skew(45deg,10deg)
skewx(45deg)
skewy(45deg)
5、matrix() 合并属性,有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
六、css3的3D转换
transform-style:preserve-3d;(将2d转化为三维)
transform: rotate3d(0,1,0,180deg);前三个值 为0不转,为1时旋转
rotateX()方法,围绕其在一个给定度数X轴旋转
rotateY()方法,围绕其在一个给定度数Y轴旋转。
七、css3的过渡
要实现这一点,必须规定两项内容:添加效果的CSS属性和效果的持续时间。
/*设置过渡延迟*/
transition-delay: 1s;
/*设置过渡的时间*/
transition-duration: 2s;
/*设置过渡属性 如果过渡的属性比较多 其他的一样 可以写成all 也可以使用逗号连写*/
transition-property: text-shadow;
/*设置动画的方式 linear ease ease-in ease-out ease-in-out*/
transition-timing-function:linear;
/* transition:text-shadow .5s linear,font-size .5s ease-in;*/
transition:all .5s linear;
八、css3动画
必须定义动画名称和动画的持续时间。如果省略的持续时间,动画将无法运行,因为默认值是0。
两种形式:
1、from to
例:
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
2、 0% 100%
例
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
属性 :
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
css3动画
animation: ;
/
//!动画执行的次数 number infinite!//
/animation-iteration-count: 2;/
//!播放方式!//
/animation-direction:alternate;/
//!动画的延迟!//
/animation-delay: 1s;/
//!动画的时间!//
/animation-duration: 5s;/
//!播放完成的位置!//
/animation-fill-mode: forwards;/
//!动画名称!//
/animation-name: animte_1;/
//!动画的状态 running paused!//
/animation-play-state: paused;/
//!动画的运动方式!/*/
/animation-timing-function: linear;/
animation: animte_1 1s .5s linear infinite alternate;