一，Css3新增特性有哪些
css3比css2多了一些新特性,比如：.nth-child,nth-of-type，first-child,last-child等一些伪类选择器还有圆角：border-radius,盒阴影：box-shadow,渐变:linear gradiendt还有动画：transition(过渡),transform（实现位移(translate)，倾斜(skew)，旋转(rotate)，缩放(scale)）,animation（关键帧动画）配合@keyframes等 以及@media 和flex弹性盒子；
CSS3的新特性大致分为以下六大类；
CSS3选择器；
1.基本选择器
基本选择器又分为：
子选择器；
相邻兄弟选择器；
通用兄弟选择器；
群组选择器；
2.属性选择器
属性选择器允许按照元素的某个属性来选择元素。例如，可以根据元素的属性值选择特定的元素。
<div bb >
</div>
<div aa >
</div>
div[bb]{
width: 50px;
height: 50px;
background-color: red;
}
div[aa]{
width: 50px;
height: 50px;
background-color: blanchedalmond;
}
3.伪类选择器
伪类就是开头为冒号的关键字：
:pseudo-class-name
示例：
<p>记得喝水</p>
<p>记得吃饭</p>
p:first-child {
font-size: 120%;
font-weight: bold;
}
还有一些如：：last-child,:only-child,:invalid
伪元素开头为双冒号::
::pseudo-element-name
注意：一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。
::first-line伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。
示例：
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
p::first-line {
width: 200px;
font-size: 120%;
font-weight: bold;
}
除了以上示例还有更多伪类伪元素 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements 查看
4、CSS3边框与圆角
1.CSS3圆角border-radius：可以为元素添加圆角边框（块元素，行内块元素，行内元素）
属性：
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
复合属性：border-radius：
属性值
四个值：左上角 右上角 右下角 左下角
三个值：左上角 右上角和左下角 右下角
两个值：左上角和右下角 右上角和左下角
一个值：4个角都生效
border-radius中的属性值由两个参数值构成: value1 / value2，值之间用/分隔，value1代表圆角的水平半径，value2代表圆角的垂直半径。
圆形与椭圆：
一旦使用百分比，参照的是元素本身的高度与宽度
当拿50%时，宽等于高为圆形 宽不等于高为椭圆形；
2.盒阴影box-shadow：可以控制一个或多个下拉阴影的框;
语法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影;
属性值的介绍：
偏移量：
把元素左上角（0，0）作为基准点，找水
平方向和垂直方向的偏移量
水平： 正值 — 右 ，负值 — 左
垂直： 正值 — 下 ，负值 — 上
模糊程度：
边界模糊，但是边界线未动
由边界线向外模糊多少像素
扩展程度：
盒子阴影，上下左右都向外扩展多少像素
是否具有内阴影：
inset(默认没有，也就是默认是外阴影)
加上inset,盒子的阴影为内阴影
扩展程度可为负值，但是模糊程度不可以
5.CSS3背景与渐变
背景：
background-image
backgroundimage:url('1.jpg),url('2.jpg')
使用逗号把图片分开
background-cilp
background-cilp：border-box / padding-box / content-box
background-origin
定义：设置背景图像的原始起始位置
background-repeat
定义：设置是否及如何重复背景图像，默认地，背景图像在水平和垂直方向上重复。
background-size
定义：指定背景图像的大小
复合属性background
定义：可以在一个声明中设置所有的背景属性
CSS3渐变：
定义：可以在两个或者多个指定颜色之间显示平移的过渡
线性渐变
定义：是沿着一根轴线改变颜色，从起点到终点进行顺序渐变（从一边拉向另一边）
语法：background:linear-gradient(方向，开始颜色，结束颜色)
径向渐变
定义：从起点到终点，颜色从内向外进行圆形渐变
语法：background:radial-gradient(形状尺寸，开始颜色，结束颜色)
6、CSS3过渡
定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。
1.transition-property属性
定义：设置对象中的参与过渡的属性
语法：transition-property：none | all | property
2.transition-duration属性
定义: 设置对象过渡的持续时间
语法：transition-duration：time
3.transition-timing-function属性
定义：设置对象中过渡的动画类型，即规定过渡效果的速度曲线。
该属性允许过渡效果随着时间来改变其速度。
语法：只能使用一个属性值
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
4.transition-delay属性
定义：设置对象延迟的过渡时间
语法：transition-delay：time
参数说明：
指定秒或者毫秒数来延迟动画效果的开始，默认是0
5.transition复合属性
语法：
transition ： property duration timing-function delay；
参数说明：过渡时间和延迟时间的顺序不能乱、
CSS3变换
定义：让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素。
语法：transform：none | 默认值是none
2d变换
1.rotate()旋转
定义：通过指定一个角度参数，对元素指定一个2D的旋转
语法：transform：rotate(angle) 单位deg
参数说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转
2.translate()平移
定义：根据X轴和Y轴的位置给定参数，使当前元素位置移动
分类：
translateX() 仅水平方向移动
语法：transform：translateX() 单位px
translateY() 仅垂直方向移动
语法：transform：translateY() 单位px
translate(x,y) 水平方向和垂直方向同时移动
语法：transform：translate( X, Y) 单位px
注意：如果只写一个参数，第二个默认是0，也就是只设置了水平方向上的位移
3.scale( )缩放
定义：设置元素的缩放程度
分类：
scaleX( ) 仅水平方向缩放
语法：transform：scaleX() 没有单位
scaleY( ) 仅垂直方向缩放
子主题 语法：transform：scaleY() 没有单位
scale(x,y) 使元素水平和垂直方向同时缩放
语法：transform：scale(x,y) 没有单位
4.skew()扭曲/倾斜
定义：设置元素的倾斜状态
分类：
skewX( ) 仅使元素在水平方向上扭曲变形 单位deg 正值 ----逆时针
skewY( ) 仅使元素在垂直方向上扭曲变形 单位deg 正值 ----顺时针
skew( ) 使元素在水平方向和垂直方向上扭曲变形 单位deg
注意：0deg与180deg 效果一样
二、CSS3动画
定义：使元素从一种样式逐渐变化到另外一种样式的效果
@keyframes
定义：keyframes关键帧，用来决定动画变化的关键位置
注意：keyframes 控制关键位置，并不是所有的位置
语法：
@keyframes animationname{
keyframes-selector{
cssStyles;
}}
animationname：必写项，定义动画的名称
keyframes-selector：必写项，动画持续时间的百分比 0% - 100%之间， 或者使用form和to关键字也可以设置，form代表0%，to代表100%
示例：
@keyframes abc {
from{transform: rotate(0)}
50%{transform:rotate(90deg)}
to{transform: rotate(360deg)}
}
animation属性
1.animation-name属性
设置对象所应用的动画名称
语法：
animation-name：keyframename | none
参数说明：
keyframename：指定要绑定到选择器的关键帧的动画名称
2.animation-duration属性
定义：设置对象动画的持续时间
语法：
animation-duration：time
参数说明：指定对象播放完成需要花费的时间，默认值是0
3.animation-timing-function属性
定义：设置对象动画的过渡类型，即规定动画的速度曲线
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
语法：
animation-timing-function: value;
参数说明：与transition-timing-function属性的参数一样
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
4.animation-delay属性
定义：设置动画的延迟时间
语法：
animation-delay：time
参数说明：可选值，定义动画开始前等待的时间，以秒或者毫秒数计数，默认值是0
5.animation-iteration-count属性
定义：设置对象动画的循环次数
语法：
animation-iteration-count ： infinite | number
参数说明：
number为数字，其默认值是1
infinite：无限循环次数
6.animation-direction属性
定义：设置对象动画是否反向运动
语法：
animation-direction：normal , reverse , alternate , alternate-reverse
参数说明：
normal : 正常方向
reverse :反向运动
alternate ： 先正常运动在反向运动，并持续交替运行， 需要配合循环属性使用
alternate-reverse ： 先反向运动在正常运动，并持续交替运行， 需要配合循环属性使用
扫一扫
2327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
