本文详细介绍了CSS3中的线性渐变、径向渐变、用户界面属性如resize和box-sizing，多列布局的相关属性，以及css3过渡效果、变换效果和帧动画的使用方法，包括各个属性的兼容性和应用场景。
一、线性渐变
重复线性渐变
background: repeating-linear-gradient(red 10%,yellow 20%);
线性渐变的兼容性： ie10+
.box3 {
background: -webkit-linear-gradient(left,red 10%,yellow 20%);
background: -moz-linear-gradient(left,red 10%,yellow 20%);
background: -o-linear-gradient(left,red 10%,yellow 20%);
background: -ms-linear-gradient(left,red 10%,yellow 20%);
/* 标准属性放在后面 */
background: linear-gradient(left,red 10%,yellow 20%);
}
二、径向渐变
background：radial-gradient(color1,color2......)
重复径向渐变
background：repeating-radial-gradient(color1,color2......)
兼容性： ie10+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
float: left;
width: 260px;
height: 260px;
/* background-color: tomato; */
margin: 20px;
}
.box1 {
background: radial-gradient(red,yellow);
}
.box2 {
background: radial-gradient(red 10%,yellow 50%);
}
.box3 {
background: repeating-radial-gradient(red 10%,yellow 20%);
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
</html>
三、用户界面属性
1、resize属性
规定是否可由用户调整元素的尺寸
resize: none|both|horizontal|vertical;
- none 没有
- both 用户可以调整水平方向和垂直方向的尺寸
- horizontal 用户可以调整水平方向的尺寸
- vertical 用户可以调整垂直方向的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
resize: none;
}
.box {
width: 200px;
height: 200px;
border: 1px solid red;
/* 溢出部分由浏览器判断如何进行处理 */
overflow: auto;
resize: horizontal;
resize: vertical;
resize: both;
}
</style>
</head>
<body>
<textarea cols="30" rows="10"></textarea>
<div class="box"></div>
</body>
</html>
2、box-sizing属性
允许以特定的方式定义匹配某个区域的特定元素
box-sizing: content-box|border-box;
兼容性： ie8+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
float: left;
width: 300px;
height: 300px;
padding: 50px;
border: 10px dotted yellow;
margin: 30px;
}
.box1 {
/* 标准盒模型： 设置的width和height属性应用到内容区域的，设置的宽高是内容区域的宽高，如果我们设置了padding和border，那么页面中盒子的占位宽高将需要在设置的width和height的基础上加上padding和border */
box-sizing: content-box;
}
.box2 {
/* 怪异盒模型（c3盒模型）：设置的width和height属性应用到边框盒，设置的宽高是页面中盒子的占位宽高，实际盒子的内容区域的宽高需要在这个基础上减去padding和border */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>
四、多列布局
1、column-count
规定元素被分隔的列数
column-count：number | auto;
- number 需要划分为几列就写数字几
- auto 自动
2、column-width
规定每个列的宽度
column-width： auto | length;
- auto 自动
- length 设置每一列的宽度
3、column-gap
规定列之间的间隔
column-gap：length | normal;
- length 设置列与列之间的间隔是多少
- normal 设置合理的间距，w3c推荐是1em
4、column-rule
简写，设置列之间的分割线的宽度、样式和颜色
column-rule: column-rule-width column-rule-style column-rule-color;
兼容性： ie10+
五、css3过渡效果
过渡： 一种样式到另一种样式的逐渐改变
1、transition-property
规定设置过渡效果的 CSS 属性的名称。
transition-property:all | property | none;
-
none 没有
-
property 直接去定义需要过渡的属性是哪个属性
-
all 全部可以过渡的属性都需要过渡
/* 如果有多个属性需要过渡，那么逗号隔开 */
transition-property: width,height,background-color;
2、transition-duration
规定完成过渡效果需要多少秒或毫秒。
transition-duration:time;
- time 过渡时间一般单位是秒（s）或者毫秒（ms）
3、transition-timing-function
规定过渡效果的速度曲线。
transition-timing-function:ease | ease-in | ease-out | ease-in-out | linear;
- ease 慢速开始-----加速-------慢速结束
- ease-in 慢速开始
- ease-out 慢速结束
- ease-in-out 慢速开始，-慢速结束
- linear 匀速
4、transition-delay
定义过渡效果从何时开始。
transition-delay:time;
- time 延迟时间一般单位是秒（s）或者毫秒（ms）
5、transition简写
transition: transition-property transition-duration transition-timing-function transition-delay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: tomato;
/* transition-property: width; */
/* 如果有多个属性需要过渡，那么逗号隔开 */
/* transition-property: width,height,background-color; */
/* transition-property: all; */
/* transition-duration: 3s; */
/* 速度曲线 */
/* transition-timing-function: ease; */
/* transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear; */
/* transition-delay: 1s; */
/* 过渡简写 */
/* transition: width 3s linear 1s; */
transition: width 3s linear;
transition: width 3s;
/* 如果只设置过渡时间，那么所有可以过渡的属性都会进行过渡 */
transition: 2s;
}
.box:hover {
width: 1000px;
height: 600px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
兼容性： ie10+
六、css3中的变换效果
transform: none | transform-function;
- none 没有变换效果
- transform-function 设置变形函数
兼容性： ie10+，但是在ie9中支持-ms-
1、2d变换
（1）2d位移
transform：translate(x,y) /*设置水平方向和垂直方向的位移*/
transform：translateX(x) /*设置水平方向位移*/
transform：translateY(y) /*设置垂直方向位移*/
2d位移只影响自己盒子的位置，不会影响其他元素的排列
注意：
- 行级元素设置2d位移无效
应用：
-
配合定位属性来实现盒子的绝对居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrap { position: relative; width: 500px; height: 500px; background-color: aqua; } .box { position: absolute; top: 50%; left: 50%; /* 2d位移中的百分比是相对于自身的宽高来计算的 */ transform: translate(-50%,-50%); width: 137px; height: 137px; background-color: pink; } </style> </head> <body> <div class="wrap"> <div class="box"></div> </div> </body> </html>
（2）2d旋转
transform：rotate(ndeg)
n的取值可以是正值，负值或者0
正值是顺时针旋转，负值是逆时针旋转
（3）2d缩放
transform: scale(x, y) /*设置水平方向和垂直方向的缩放比例*/
transform: scaleX(x) /*设置水平方向的缩放比例*/
transform: scaleY(y) /*设置垂直方向的缩放比例*/
x,y的取值如果是大于1的就代表放大，0-1之间表示缩小，负数会先翻转元素，再放大或者缩小
（4）2d倾斜
transform: skew(x, y)
transform: skewX(x)
transform: skewY(y)
2、变换基点
transform-origin：关键词 | %;
-
关键词
- 水平： left right center
- 垂直： top bottom center
-
百分比
默认的变换基点位置是50% 50%
一般设置基点位置是设置两个值，第一个值是水平方向的值，第二个值是垂直方向的值
兼容性： ie10+，在ie9中支持-ms-
3、3d变换
3d坐标系：
x轴： 水平朝右是正方向
y轴： 垂直向下是正方向
z轴： 从屏幕到眼睛跟前这是z轴正方向
（1）3d位移
transform：translateZ(z)
（2）3d旋转
transform:rotateX(x);
transform:rotateY(y);
transform:rotateZ(z);
（3）3d缩放
transform: scaleZ()
元素在Z轴上缩放
（4）透视属性
perspective:500px;
也叫做视距
透视属性加在父元素身上的
（5）transform-style
transform-style: preserve-3d | flat;
- preserve-3d 给子元素开始3d空间
- flat 子元素不开启3d空间（默认值）
兼容性： ie不支持
七、css3帧动画
1、定义关键帧动画
@keyframes 动画名称 {
from{}
to{}
}
@keyframes 动画名称 {
0%{}
100%{}
}
2、使用动画
（1）animation-name
规定需要绑定到选择器的 keyframe 名称
（2）animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
（3）animation-timing-function
规定动画的速度曲线。
（4）animation-delay
规定在动画开始之前的延迟。
（5）animation-iteration-count
规定动画应该播放的次数。
animation-iteration-count: n | infinite;
- n 设置播放次数是几次
- infinite 循环播放
（6）animation-direction
规定是否应该轮流反向播放动画。
/* 动画是否反向轮流播放 */
animation-direction: normal | alternate;
- alternate 反向轮流播放（播放次数不能为1）
（7）animation简写
animation: animation-name animation-duration [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction];
/* 简写 */
animation: change 3s linear 1s infinite alternate;
animation: change 3s linear 1s infinite;
animation: change 3s linear 1s;
animation: change 3s linear;
animation: change 3s;
动画名称和动画播放时间是必须属性
扫一扫
485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
