css3有哪些新特性?

51 阅读17分钟
  1. -webkit-:webkit核心的浏览器,也就是谷歌的Chrome浏览器;
  2. -moz-:Gecko核心的浏览器;
  3. -o-:Opera浏览器;
  4. -ms-:微软的IE浏览器。

1、CSS3选择器又分为:

1)基本选择器

2)属性选择器

3)伪类选择器

3-1)动态伪类
	1.锚点伪类 —— :link:visited
	2.用户行为伪类 —— :hover:active:focus
	3.目标伪类 —— :target
	4.checked状态伪类
32)CSS3结构类:nth选择器
	:first-child/last-child
	:nth-child(n)  
            参数为n时选中所有行,
            参数为n+i时表示从第i行开始下面的都被选中,
            2n表示2的倍数行被选中,即偶数行,
            3n表示3的倍数行被选中。
	:nth-last-child(n)
	 ————
	:nth-of-type(n) 
            可以通过参数来选择表格的奇数行或偶数行,
            odd代表奇数行,even代表偶数行。
	: nth-last-of-type
	: first-of-type/:last-of-type
	 ————
	:only-child
	:only-of-type
	:empty
4)否定选择器:not
伪元素(也可以使用 '😂)
1. element::first-line —— 元素的第一行,块级元素
2. element::first-letter —— 文本首字母,块级元素
3. element::before —— 常与content配合使用
4. element::after
5. element::selection —— 选中文本后的背景色与前景色
伪元素与元素的区别:
1. 无法通过JS获取其DOM
2. 无法通过浏览器开发者工具直接查看
3. 伪元素默认是 inline

2、CSS3新样式

1)CSS3圆角border-radius

复合属性:border-radius:
    四个值:左上角 右上角 右下角 左下角
    三个值:左上角 右上角和左下角 右下角
    两个值:左上角和右下角 右上角和左下角
    一个值:4个角都生效
    当拿50%时,宽等于高为圆形 宽不等于高为椭圆形(百分比,参照的是元素本身的高度与宽度)

2)阴影box-shadow与text-shadow

box-shadow

语法:box-shadow: 横向偏移量 纵向偏移量 模糊程度 扩展程度 颜色 是否具有内阴影
属性值介绍:
	2-1)偏移量:
		素左上角(00)作为基准点,找水平方向和垂直方向的偏移量
		水平: 正值 --- 右 ,负值 --- 左
		垂直: 正值 --- 下 ,负值 --- 上
	2-2)模糊程度:
		边界模糊,但是边界线未动
		由边界线向外模糊多少像素
	2-3)扩展程度:
		盒子阴影,上下左右都向外扩展多少像素
	2-4)是否具有内阴影:
		inset(默认没有,也就是默认是外阴影)
		加上inset,盒子的阴影为内阴影
		扩展程度可为负值,但是模糊程度不可以

text-shadow

语法: text-shadow 横向偏移量 纵向偏移量 模糊半径(数值越高越模糊,反之越清晰)阴影颜色

设置多个阴影,用逗号隔开:
例子:text-shadow: 2px 2px 2px red, -2px -2px 0 blue;

3)边框图片 border-image

语法:border-imageborder-image-source [border-image-slice] [border-image-width] [border-image-outset] [border-image-repeat];

        1. border-image-source:定义边框图像的路径;
        2. border-image-slice:定义边框图像从什么位置开始分割;
        3. border-image-width:定义边框图像的厚度(宽度);
        4. border-image-outset:定义边框图像的外延尺寸(边框图像区域超出边框的量);
        5. border-image-repeat:定义边框图像的平铺方式。
实例:border-image:url(border.png) 70 70 70 70 repeat;

4)文字和字体 text-overflow与word-wrap

text-overflow:clip(表示剪切) | ellipsis(表示显示省略标记);

但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须其他条件:

定义强制文本在一行显示(white-space:nowrap)

溢出内容为隐藏(overflow:hidden)

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

word-wrap用来设置文本行为,当前行超过指定容器的边界时是否断开转行

word-wrap:normal |break-word;

5)文字与字体 @font-face

@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。

@font-face{
    font-family:"字体名称";
    src:url("字体文件在服务器上的相对或绝对路径");
}

这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。比如:

p{
    font-size:12px;
    font-family:"my font";/*必须项,设置@font-face中font-family同样的值*/
}

6)文字与字体 font-stretch

@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 让所有的div元素的文本更宽:

div { font-stretch: expanded; }

目前没有主流浏览器支持font-Stretch属性。 值说明:

wider:使得文本更宽
narrower:使得文本窄
ultra-condensed:使文本窄得不能再窄
extra-condensed:指定紧缩程度第二大的字体
condensed:指定略微紧缩程度第二大的字体
semi-condensed:指定略微紧缩的字体
normal:指明字体既不紧缩也不加宽
semi-expanded:指定略微加宽的字体
expanded:指定加宽的字体
extra-expanded:指定加宽程度第二大的字体
ultra-expanded:指定加宽程度最大的字体
inherit:指定该属性与元素父项的属性采用相同的计算值

7)盒子模型 box-sizing

box-sizing: content-box | border-box | inherit
  • content-box:默认值,其让元素维持W3C的标准盒模型,也就是说元素的宽度和高度(width/height)等于元素边框宽度(border)加上元素内距(padding)加上元素内容宽度或高度(content width/ height),也就是element width/height = border + padding + content width / height
  • border-box:重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型(IE6以下版本和IE6-7怪异模式),也就是说元素的宽度或高度等于元素内容的宽度或高度。根据传统IE盒模型可知,这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度(此处的内容宽度或高度=盒子的宽度或高度—边框—内距)
  • inherit:使元素继承父元素的盒模型模式

8)伸缩布局 flexbox

Flex 布局教程:语法篇

9)指针 pointer-event

pointer-events:字面理解是点击鼠标事件,值分别是auto和none。 当使用pointer-events:none,表示它将捕获不到任何点击,而只是让事件穿透到它的下面

pointer-events: auto|none;

属性值:

  • auto:默认值。元素对指针事件做出反应,比如 :hover 和 click。
  • none:元素不对指针事件做出反应。

10)重置 resize

规定可以由用户调整 div 元素的大小:

div {
    resize:both;    overflow:auto;
}

resize 属性规定是否可由用户调整元素的尺寸。 注释:如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll。

  • none:用户无法调整元素的尺寸。
  • both:用户可调整元素的高度和宽度。
  • horizontal:用户可调整元素的宽度。
  • vertical:用户可调整元素的高度。

11)媒体查询 media

作用:

  • 使用@media查询,可以针对不同的媒体类型定义不同的样式
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多苹果手机、Android手机,平板等设备都用得到媒体查询

语法:

@media mediatype and|not|only (media feature){ css-code; }

  • 用@media开通 注意@符号
  • mediatype 媒体类型
    • all:所有设备
    • print:打印机和打印预览
    • screen: 电脑屏幕、平板电脑、智能手机等
  • 关键字 and not only
  • media feature 媒体特性,必须有小括号包含
    • width: 定义输出设备中页面可见区域的宽度
    • min-width:定义输出设备中页面最小可见区域宽度
    • max-width:定义输出设备中页面最大课件区域宽度

引入资源:

<link rel="stylesheet" href="style1.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style2.css" media="screen and (min-width: 640px)">

3、CSS3背景与渐变

3-1)CSS3背景

1background-image
    background-cilp:border-box / padding-box / content-box —— 指定背景的绘制区域(裁剪)
	border-box:背景被裁剪到边框盒(从边框开始绘制背景图片)---默认
	padding-box:背景被裁剪到内边距框(从内边距开始绘制背景图片)
	content-box:背景被裁剪到内容框
2background-originborder-box / padding-box / content-box —— 设置背景图像的原始起始位置
	border-box:相对于边框来定位
	padding-box:相对于内边距来定位
	content-box:相对于内容框来定位

image.png

background-position:定义背景图片的位置,水平与垂直方向上面的偏移量(参考点)
3)background-repeat —— 设置是否及如何重复背景图像
   repeat 默认。背景图像将在垂直方向和水平方向重复。
   repeat-x 背景图像将在水平方向重复。
   repeat-y 背景图像将在垂直方向重复。
   no-repeat 背景图像将仅显示一次。
   inherit 规定应该从父元素继承 background-repeat 属性的设置
4)background-size:number / % / cover / contain —— 指定背景图像的大小
   number: 宽度 高度(如果只写一个数值,第二个数值默认auto)
   百分比: 0% - 100% 之间的任何值,此时的百分比参照于元素div的大小
   cover:将背景图片等比缩放以填满整个容器(最远边),如果高度达到一定比例100%,宽度多出的会溢出,但是,具体那部分溢出取决于定位
   contain:将背景图片等比缩放至某一边紧贴容器边缘为止(最近边),如果图片高度比较小,高度就会有空白区域出现
]()

3-2)css3 object-fit object-position

object-fit

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。 您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

img.a {
  width: 200px;  height: 400px;  object-fit: cover;
}

属性值

  • fill:默认,不保证保持原有的比例,内容拉伸填充整个内容容器。
  • contain:保持原有尺寸比例。内容被缩放。
  • cover:保持原有尺寸比例。但部分内容可能被剪切。
  • none:保留原有元素内容的长度和宽度,也就是说内容不会被重置。
  • scale-down:保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。
  • initial:设置为默认值,关于 initial
  • inherit:从该元素的父元素继承属性。关于 inherit

object-position

根据容器大小重置图片的大小,并设置图片的位置:

img.a {
  width: 200px;  height: 400px;  object-fit: none;  object-position: 5px 10%;  border: 5px solid red;
}

object-position 属性一般与 object-fit一起使用,用来设置元素的位置。 object-position 一般用于 img 和 video 标签。

position:指定 image 或 video 在容器中的位置。第一个值为 x 坐标位置的值,第二个值为 y 坐标位置的值。表示的方式有:

object-position: 50% 50%;
object-position: right top;
object-position: left bottom;
object-position: 250px 125px;
  • initial:设置为默认值,关于 initial
  • inherit:从该元素的父元素继承属性。关于 inherit

3-3)CSS3渐变

1)线性渐变 —— 是沿着一根轴线改变颜色,从起点到终点进行顺序渐变
    语法:background:linear-gradient(方向,开始颜色,结束颜色)
    方向介绍:
    1-1)方向从上到下
            background: linear-gradient(red,blue);
    1-2)方向从左到右
            background: linear-gradient(**to right**,red,blue);
    1-3)对角
            background: linear-gradient(to right bottom,red,blue);
    1-4)角度(单位deg)
            background: linear-gradient(角度,red,blue);
            角度说明:0deg 将创建一个从下到上的渐变,90deg将创建一个从左到右的渐变
            颜色结点:默认每个颜色均匀分布
            background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);
            background: linear-gradient(red 10%,blue); —— 从0%10%,为红色,从10%100%为红色到蓝色的渐变
            background: linear-gradient(red,blue 30%); —— 从0%30%,为红色到蓝色的渐变
    background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1)); —— 由透明色变为不透明色
    1-5)重复渐变
            background: repeating-linear-gradient(90deg,red 0%,blue 20%); —— 把元素的整体宽度看成100%
2)径向渐变 —— 从起点到终点,颜色从内向外进行圆形渐变
    background:radial-gradient(形状尺寸,开始颜色,结束颜色)
    2-1)形状分类:
            circle --- 圆形
            ellipse --- 椭圆形
            当元素的高和宽一样时,参数无论设置哪个,都是圆形
    2-2)尺寸大小:
            2-2-1)closest-side最近边
                background: radial-gradient(closest-side circle,red , blue);
            2-2-2)farthest-side 最远边
                background: radial-gradient(farthest-side circle,red , blue);
            2-2-3)closest-corner最近角
                background: radial-gradient(closest-corner circle,red , blue);
            2-2-4)farthest-corner最远角
                background: radial-gradient(farthest-corner circle,red , blue);
    2-3)颜色结点:
            background:radial-gradient(circle,red 50% ,blue 70%);
            注:此时的百分比,指的是圆心到元素最远端的距离(角度)
    2-4)重复渐变 :
             background: repeating-radial-gradient(red 0%,blue 20%);

4、CSS3过渡 transition

定义:允许css的属性值在一定时间区间内平滑的过渡,在鼠标点击,鼠标滑过或对元素任何改变中触发,并圆滑地以动画形式改变css的属性值。
属性:
1.transition-property::none | all | property
        定义:设置对象中的参与过渡的属性
        none: 没有属性改变
        all : 默认值,所有属性都改变
        property: 元素的属性名 width,color等
2.transition-duration:time
        定义: 设置对象过渡的持续时间
        规定完成过渡效果需要花费的时间,以秒或者毫秒计,默认值0
3.transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
        定义:设置对象中过渡的动画类型,即规定过渡效果的速度曲线。
        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)
4.transition-delay:time
        定义:设置对象延迟的过渡时间
        指定秒或者毫秒数来延迟动画效果的开始,默认是0
5.transition : property duration timing-function delay;
        复合属性,过渡时间和延迟时间的顺序不能乱

5、CSS3变换 transform

定义:让一个元素在一个坐标系统中变形,这个属性包含一系列的变形函数,可以移动,旋转,缩放元素。
语法:transformnone | <transform-function> 默认值是none

5-1)2d变换

1.rotate()旋转
	定义:通过指定一个角度参数,对元素指定一个2D的旋转
	语法:transformrotate(angle) 单位deg
	说明:angle指旋转角度,正数表示顺时针旋转,负数表示逆时针旋转
2.translate()平移
	定义:根据X轴和Y轴的位置给定参数,使当前元素位置移动
	语法:transformtranslateX() 单位px —— 仅水平方向移动
	语法:transformtranslateY() 单位px —— 仅垂直方向移动
	语法:transformtranslate( X, Y) 单位px —— 水平方向和垂直方向同时移动
3.scale( )缩放
        定义:设置元素的缩放程度
        语法:transformscaleX() 没有单位 —— 仅水平方向缩放
        语法:transformscaleY() 没有单位 —— 仅垂直方向缩放
        transformscale(x,y) 没有单位 —— 使元素水平和垂直方向同时缩放
4.skew()扭曲/倾斜
        定义:设置元素的倾斜状态
        skewX( ) 仅使元素在水平方向上扭曲变形 单位deg 正值 ----逆时针
        skewY( ) 仅使元素在垂直方向上扭曲变形 单位deg 正值 ----顺时针
        skew( ) 使元素在水平方向和垂直方向上扭曲变形 单位deg
        注意:0deg180deg 效果一样
5.变换基点
        定义:元素变换的基准点
        语法: transform-origin:水平方向 垂直方向
        left top 左上角 ----四个角均可以
        25% top
        50px 50px
        默认值:rotate 几何中心点,skew 几何中心点,scale 几何中心点,translate 本身位置

使用方式:

transform: translate(120px, 50%) 位移
transform: scale(2, 0.5)  缩放
transform: rotate(0.5turn) 旋转
transform: skew(30deg, 20deg) 倾斜

5-2)3d变换

1.开启3d空间transform-style: preserve-3d; 一般给父元素开启
2.子元素设置3d变换效果
	2-1rotateX()
		定义:指对象在X轴上的旋转角度(变换基点: 50% 50% 02-2rotateY()
		定义:指对象在Y轴上的旋转角度(变换基点: 50% 50% 02-3) rotateZ()
		定义:指对象在Z轴上的旋转角度(变换基点: 50% 50% 02-4)translateZ()
		定义:指对象在Z轴上面的平移(变换基点: 50% 50% 02-5)scaleZ()
		定义:指定对象的Z轴缩放(变换基点: 50% 50% 0)(无太大意义,开启3d空间)
3.设置景深:实现近大远小
	父元素:perspective: 300px;
	子元素:transform:perspective(300px) translateZ(-200px);
	注意:景深:可选值:大于或等于0,景深值越大,元素看起来越大
4.变换基点
	transform-origin: top; 关键字表示 ( 50% 0 0 )
	注意:立体3d盒子 Z:只能使用具体的长度,不能使用百分比和关键字
5.景深中心点:改变观察者视角
	perspective-origin: top;
	perspective-origin: top right;
6.元素背面可见还是不可见
	backface-visibility:visible ;(默认值:可见)
	backface-visibility: hidden; 不可见

6、CSS3动画

定义:使元素从一种样式逐渐变化到另外一种样式的效果

6-1) @keyframes

定义:keyframes关键帧,用来决定动画变化的关键位置
语法:@keyframes animationname{keyframes-selector{cssStyles;}}
animationname:必写项,定义动画的名称
keyframes-selector:必写项,动画持续时间的百分比 0% - 100%之间, 或者使用formto关键字也可以设置,form代表0%to代表100%
示例:
@keyframes abc {
	from{transform: rotate(0)}
	50%{transform:rotate(90deg)}
	to{transform: rotate(360deg)}
}

6-2) animation属性

1.animation-name:keyframename | none
	keyframename:指定要绑定到选择器的关键帧的动画名称
2.animation-durationtime
	定义:设置对象动画的持续时间
	说明:指定对象播放完成需要花费的时间,默认值是0
3.animation-timing-function: value;
	定义:设置对象动画的过渡类型,即规定动画的速度曲线
	linear	动画从头到尾的速度是相同的。
	ease	默认。动画以低速开始,然后加快,在结束前变慢。
	ease-in	动画以低速开始。
	ease-out	动画以低速结束。
	ease-in-out	动画以低速开始和结束。
	cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 01 的数值。
4.animation-delaytime
	定义:设置动画的延迟时间
5.animation-iteration-count:infinite | number
	定义:设置对象动画的循环次数
	number为数字,其默认值是1
	infinite:无限循环次数
6.animation-directionnormal , reverse , alternate , alternate-reverse
	定义:设置对象动画是否反向运动
	normal : 正常方向
	reverse :反向运动
	alternate : 先正常运动在反向运动,并持续交替运行, 需要配合循环属性使用
	alternate-reverse : 先反向运动在正常运动,并持续交替运行, 需要配合循环属性使用
7.animation-play-state:paused | running
	定义:指定对象是否正在运行或已暂停
	paused : 指定暂停动画
	running : 默认值,制定正在运行的动画
	示例: #box:hover{animation-play-state: paused;}—鼠标移动到box上暂停动画
8.animation-fill-mode
	定义:设置动画结束后的状态
	none:默认值。不设置对象动画之外的状态,DOM未进行动画前状态
	forwards:设置对象状态为动画结束时的状态,100%to时,当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
	backwards:设置对象状态为动画开始时的状态,(测试显示DOM未进行动画前状态)
	both:设置对象状态为动画结束或开始的状态,结束时状态优先
9.animation复合属性(不推荐使用 )

实例:

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-动画animation</title>
    <style>
        .fa {
            width: 500px;
            height: 500px;
            border: 1px solid;
            perspective: 200px;
            margin: 0 auto;
        }
        .sn {
            /* transition: all 2s ease-out 1s; */
            width: 150px;
            height: 150px;
            background-color: green;
            /* animation: onemove 5s ease-in-out 2s 3 alternate; */
            animation: twomove 5s ease-in-out 2s 3 alternate;
        }
        @keyframes onemove {
            from {
                width: 150px;
                height: 150px;
            }
            to {
                width: 400px;
                height: 400px;
            }
        }
       @keyframes twomove {
           0% {
            /* transform复合值 通过空格隔开 */
            transform: translate3d(100px, 100px, 0px) scale(.5);
           }
           50% {
            transform: translate3d(200px, 200px, 0px) scale(2);
           }
           100% {
            transform: translate3d(1, 1, 1 ,45deg) skewX(45deg);
           }
       }
    </style>
</head>
<body>
    <div class="fa">
        <div class="sn"></div>
    </div>
</body>
</html>

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


参考链接: