css3新特性分为哪几六类

这篇“css3新特性分为哪几六类”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css3新特性分为哪几六类”文章吧。

作为一家“创意+整合+营销”的成都网站建设机构,我们在业内良好的客户口碑。创新互联公司提供从前期的网站品牌分析策划、网站设计、成都做网站、成都网站制作、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务,帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。

CSS3的新特性大致分为以下六类

1.CSS3选择器

2.CSS3边框与圆角

3.CSS3背景与渐变

4.CSS3过渡

5.CSS3变换

6.CSS3动画

下面分别说一说以上六类都有哪些内容

CSS3选择器

1.基本选择器

基本选择器又分为

子选择器

相邻兄弟选择器

通用兄弟选择器

群组选择器

2.属性选择器

1.element[attribute]

为带有attribute属性的元素设置样式

2.element[attribute='value']

为attribute='value'属性的元素设置样式

3.element[attribute~='value']

选择attribute属性值包含 单词value的元素 并设置样式

4.element[attribute*='value']

选择attribute属性值包含value的元素设置样式

5.element[attribute^='value']

选择attribute属性值是以value开头的元素

6.element[attribute$='value']

选择attribute属性值是以value结尾的元素

注意比较3和4的区别

3.伪类选择器

动态伪类

定义:这些伪类并不存在于HTML中,只有当用户和网站交互的时候才能体现出来。

1.锚点伪类

:link

:visited

2.用户行为伪类

:hover

:active

:focus

3.目标伪类

:target

当我们点击锚点链接时,对应id的元素会显示在视口

4.checked状态伪类

这里我们需要知道checkbox只能设置宽高,不能设置背景和边框,如果想要设置那么我们需要用appearance:none;来清除input的默认样式

CSS3结构类:nth选择器

:first-child/last-child

语法 element:first-child

选择属于父元素的首个/最后一个子元素的每个element元素,注意element为子元素。

:nth-child(n)

选择某元素下的第n个element元素(n是一个简单的表达式,不能用其他的字母代替),括号里还可以传odd和even两个关键字

:nth-last-child(n)

匹配属于某元素下的第n个element子元素,从最后一个子元素开始计数

:nth-of-type(n)

语法 element:nth-of-type(n)

匹配属于父元素的特定类型的第n个子元素,element为指定类型的子元素

:nth-last-of-type

匹配属于父元素的特定类型的第n个子元素,从最后一个计数

:first-of-type/:last-of-type

匹配属于其父元素的特定类型的首个/最后一个子元素的每个元素

:only-child

匹配属于父元素的唯一子元素的每个元素

:only-of-type

匹配属于其父元素特定类型的唯一子元素的每个元素

:empty

匹配没有子元素(包括文本节点)的每个元素

否定选择器:not

定义:匹配非 元素或者选择器 的每个元素

语法:父元素:not(子元素或者选择器)

例:ul:not(span){}

伪元素(也可以使用:)

element::first-line

定义:对元素的第一行文本进行设置,只能用于块级元素

element::first-letter

定义:用于向文本的首字母设置特殊样式,只能用于块级元素

element::before

定义:在元素的内容前面插入新内容,常与content配合使用

element::after

定义:在元素的内容后面插入新内容,常与content配合使用

element::selection

定义:用于设置浏览器中选中文本后的背景色与前景色

图片描述

伪元素与元素的区别:

无法通过JS获取其DOM

无法通过浏览器开发者工具直接查看

伪元素默认是 inline

使用伪元素注意事项:

1.使用伪元素before,after必须设置content

2.使用伪元素before,after显示背景图,一定要使用display设置为块元素

3.使用伪元素before,after设置为display:inline-block,需要再次设置vertical-align:middle

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,盒子的阴影为内阴影

扩展程度可为负值,但是模糊程度不可以

CSS3背景与渐变

1.CSS3背景

background-image

语法:

backgroundimage:url('1.jpg),url('2.jpg')

使用逗号把图片分开

注意:元素引入多个背景图片,前面图片会覆盖后面的图片

background-cilp

定义:指定背景的绘制区域(裁剪)

语法:

background-cilp:border-box / padding-box / content-box

属性介绍:

border-box:背景被裁剪到边框盒(从边框开始绘制背景图片)---默认

padding-box:背景被裁剪到内边距框(从内边距开始绘制背景图片)

content-box:背景被裁剪到内容框

background-origin

定义:设置背景图像的原始起始位置

语法:

background-origin:border-box / padding-box / content-box(背景图片坐标原点与这三个有关系)

属性的介绍:

border-box:相对于边框来定位

padding-box:相对于内边距来定位

content-box:相对于内容框来定位

另外有一个需要了解

background-position:定义背景图片的位置,水平与垂直方向上面的偏移量(参考点)

background-repeat

定义:设置是否及如何重复背景图像,默认地,背景图像在水平和垂直方向上重复。

属性值:

repeat 默认。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

inherit 规定应该从父元素继承 background-repeat 属性的设置

background-size

定义:指定背景图像的大小

语法:

background-size:number / % / cover / contain

属性介绍:

number: 宽度 高度(如果只写一个数值,第二个数值默认auto)

百分比: 0% - 100% 之间的任何值,此时的百分比参照于元素div的大小

cover:将背景图片等比缩放以填满整个容器(最远边),如果高度达到一定比例100%,宽度多出的会溢出,但是,具体那部分溢出取决于定位

contain:将背景图片等比缩放至某一边紧贴容器边缘为止(最近边),如果图片高度比较小,高度就会有空白区域出现

复合属性background

定义:可以在一个声明中设置所有的背景属性

语法:

background:color position size repeat origin clip attachment image; background: #abc center 50% no-repeat content-box content-box fixed url('1.jpg') ,url('2.jpg')...

2.CSS3渐变

定义:可以在两个或者多个指定颜色之间显示平移的过渡

线性渐变

定义:是沿着一根轴线改变颜色,从起点到终点进行顺序渐变(从一边拉向另一边)

语法:background:linear-gradient(方向,开始颜色,结束颜色)

方向介绍:

1.方向从上到下(默认)

background: linear-gradient(red,blue);

2.方向从左到右

background: linear-gradient(to right,red,blue);

3.对角

background: linear-gradient(to right bottom,red,blue);

4.角度(单位deg)

background: linear-gradient(角度,red,blue);

角度说明:0deg 将创建一个从下到上的渐变,90deg将创建一个从左到右的渐变

颜色结点:默认每个颜色均匀分布

background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);

从0%到10%,为红色,从10%到20%为红色到蓝色的渐变,从20%到30%为蓝色到绿色的渐变,从30%到40%,为绿色到黄色的渐变,从40%到100%为黄色

background: linear-gradient(red 10%,blue);

从0%到10%,为红色,从10%到100%为红色到蓝色的渐变

最后如果不写具体数值,默认到100%

background: linear-gradient(red,blue 30%);

从0%到30%,为红色到蓝色的渐变

如果第一个不写,默认数值是 0%

background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1));

由透明色变为不透明色

重复渐变

示例:background: repeating-linear-gradient(90deg,red 0%,blue 20%);或者 background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);

注意:把元素的整体宽度看成100%

径向渐变

定义:从起点到终点,颜色从内向外进行圆形渐变

语法:background:radial-gradient(形状尺寸,开始颜色,结束颜色)

形状分类:

circle --- 圆形

ellipse --- 椭圆形

注意:当元素的高和宽一样时,参数无论设置哪个,都是圆形

尺寸大小:

closest-side最近边

background: radial-gradient(closest-side circle,red , blue);

farthest-side 最远边

background: radial-gradient(farthest-side circle,red , blue);

closest-corner最近角

background: radial-gradient(closest-corner circle,red , blue);

farthest-corner最远角

background: radial-gradient(farthest-corner circle,red , blue);

颜色结点:

例:

background:radial-gradient(circle,red 50% ,blue 70%);

注意:此时的百分比,指的是圆心到元素最远端的距离(角度)

重复渐变 :

示例: background: repeating-radial-gradient(red 0%,blue 20%);

background: repeating-radial-gradient(red 0%,blue 10%,red 20%);

CSS3过渡

定义:允许css的属性值在一定时间区间内平滑的过渡,在鼠标点击,鼠标滑过或对元素任何改变中触发,并圆滑地以动画形式改变css的属性值。

属性:

1.transition-property属性

定义:设置对象中的参与过渡的属性

语法:transition-property:none | all | property

参数说明:

none: 没有属性改变

all : 默认值,所有属性都改变

property: 元素的属性名 width,color等

2.transition-duration属性

定义: 设置对象过渡的持续时间

语法:transition-duration:time

参数说明:

规定完成过渡效果需要花费的时间,以秒或者毫秒计,默认值0

3.transition-timing-function属性

定义:设置对象中过渡的动画类型

语法:只能使用一个属性值

参数说明:

ease:平滑过渡(0--慢--快--慢),默认值

cubic-bezier(0.25,0.1,0.25,1)

linear:线性过渡(匀速) cubic-bezier(0,0,1,1)

ease-in:慢--快 cubic-bezier(0.42,0,1,1)

ease-out:快--慢 cubic-bezier(0,0,0.58,1)

ease-in-out:慢--快--慢

cubic-bezier(0.42,0,0.58,1)

贝塞尔曲线 :http://cubic-bezier.com/#.17,...

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 效果一样

5.变换基点

定义:元素变换的基准点

语法: transform-origin:水平方向 垂直方向

参数说明:

left top 左上角 ----四个角均可以

25% top

50px 50px

默认值:

rotate 几何中心点

skew 几何中心点

scale 几何中心点

translate 本身位置

3d变换

1.开启3d空间transform-style: preserve-3d; 一般给父元素开启

2.子元素设置3d变换效果

rotate

rotateX()

定义:指对象在X轴上的旋转角度(变换基点: 50% 50% 0)

rotateY()

定义:指对象在Y轴上的旋转角度(变换基点: 50% 50% 0)

rotateZ()

定义:指对象在Z轴上的旋转角度(变换基点: 50% 50% 0)

translate

translateZ()

定义:指对象在Z轴上面的平移(变换基点: 50% 50% 0)

scale

scaleZ()

定义:指定对象的Z轴缩放(变换基点: 50% 50% 0)(无太大意义,开启3d空间)

3.设置景深:实现近大远小

父元素子元素都可以设置

父元素:perspective: 300px;

子元素:

transform:perspective(300px) translateZ(-200px);

注意:景深:可选值:大于或等于0,景深值越大,元素看起来越大

默认值: 0 -- 没有景深 (不能为负值)

4.变换基点

默认值: 50% 50% 0

transform-origin: top; 关键字表示 ( 50% 0 0 )

注意:立体3d盒子 Z:只能使用具体的长度,不能使用百分比和关键字

5.景深中心点:改变观察者视角

perspective-origin: top;

perspective-origin: top right;

6.元素背面可见还是不可见

backface-visibility:visible ;(默认值:可见)

backface-visibility: hidden; 不可见

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属性

定义:设置对象动画的过渡类型

参数说明:与transition-timing-function属性的参数一样

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 : 先反向运动在正常运动,并持续交替运行, 需要配合循环属性使用

7.animation-play-state属性

定义:指定对象是否正在运行或已暂停

语法:animation-play-state:paused | running

参数说明:

paused : 指定暂停动画

running : 默认值,制定正在运行的动画

示例:鼠标移动到box上暂停动画

#box:hover{

animation-play-state: paused;

8.animation-fill-mode

设置动画结束后的状态

none:默认值。不设置对象动画之外的状态,DOM未进行动画前状态

forwards:设置对象状态为动画结束时的状态,100%或to时,当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧

backwards:设置对象状态为动画开始时的状态,(测试显示DOM未进行动画前状态)

both:设置对象状态为动画结束或开始的状态,结束时状态优先

9.animation复合属性(不推荐使用 )

语法:

animation : name duration timing-function delay interation-count direction play-state

注意:在css3里面,给元素设置圆角、阴影、变换等属性时,尽管外形位置发生改变,但是元素本身大小和位置不变

以上就是关于“css3新特性分为哪几六类”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


网页名称:css3新特性分为哪几六类
当前地址:http://myzitong.com/article/jpchgj.html