CSS3新增特性

来源：互联网发布：淘宝双11销售额编辑：程序博客网时间：2024/06/16 10:48

一.选择器

1. 关系选择器（复习）

后代选择器 ul li 选择所有的后代元素
子代选择器 ul > li 选择ul的儿子
紧邻选择器 .box + li 选择.box后面的一个li元素
兄弟选择器 .box ~ li 选择.box后面所有的li元素

2. 属性选择器：通过属性来选择对应的元素

（1）E[属性名] ：选择所有的具备这个属性的E元素
（2）E[属性名=值] ：选择所有的具备这个‘属性 = 对应值’的E元素
（3）E[属性名~=值]：选择所有的包含这个‘属性 = 对应值’的E元素

3. css3新增的：

（4）E[属性名^=值]：从头去匹配这个‘属性 = 对应值’的E元素
（5）E[属性名$=值]：从尾去匹配这个‘属性 = 对应值’的E元素
（6）E[属性名*=值]：从任意位置去匹配这个‘属性 = 对应值’的E元素

4。伪类选择器（小重点）

（1）E：first-child 找到第一个孩子为E的元素（css2）
（2）E：last-child 找到最后一个孩子为E的元素（css3）
（3）E：nth-child（N）找到第N个孩子为E的元素（css3）

5. 伪元素 before after （重点）

作用：渲染一个虚拟的标签插入到当前元素的内部的前面或者后面,单标签是没有伪元素的

（1）伪元素默认是行内元素，我们可以进行转化，在实际工作中，多用来模拟一些小的标签去装饰
（2）因为伪元素是不存在的，所以不能直接用JS去获取（可以利用类去覆盖之
前的样式）
（3）清除浮动的底层原理：就是让一个伪元素（因为伪元素不占dom内存）去清除浮动，从而节约了dom内存，也更加的合理。
（4）content一定不能省略，即使里面没有内容，也要写一个空字符串
（5）伪元素推荐用双冒号，但是IE6,7,8不支持双冒号的写法，所以为了兼容考虑，使用单冒号
（6）当伪类需要配合iconfont去使用的话需要打开iconfont.css 拿到content里面对应的值
（7）当伪元素需要hover的效果的时候不能直接hover 需要借助于父级写法：父级：hover：伪元素

5. 其他选择器

（1）input:focus{ } => 选择获取焦点的表单
（4）Input:checked => 选择被选中的checkbox表单
（2）input:enabled{ } => 选择可操控的表单元素
（3）input:disabled { } => 选择不可操控的表单

    <style>        /* 选择获取焦点的那个表单 */        input:focus{            border-color:pink;            outline: none;            height: 40px;        }        /* 选择被选中的 checkbox */        input:checked {            width: 100px;            height: 100px;        }        /* 选择可操控的那个表单元素 */        input:enabled {            background-color: pink;        }        /* 选择不可操控的表单元素 */        input:disabled{            background-color: red;        }        /* 选择通过锚点跳转的元素 */        #test:target {            color: red;        }    </style></head><body>    用户名：<input type="text" disabled >    <br>    密码： <input type="password">    <br>    身份证号： <input type="text">    <br>    爱好：足球：<input type="checkbox" name="" id="">    篮球：<input type="checkbox" name="" id="">      看动漫：<input type="checkbox" name="" id="">      <a href="#test">锚点跳转</a>    <p>我是p元素</p>    <p id="test">我是拍元素，我才是货真价实的那个锚点</p>    <p>我是p元素</p>    <p>我是p元素</p>    <p>我是p元素</p></body>

二. 颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。

1. opacity

如果给父盒子设置opacity，所有的子盒子都会有这个效果，opacity存在兼容性问题，如果是在IE6/7/8下，应该使用filter进行设置

2. rgba

R:Red、G:Green、B:Blue、A:Alpha，R、G、B 取值范围0~255，A的取值范围是0-1。

RGBA可以用于所有使用颜色的地方
rgb三个值越小，颜色越黑
如果是纯色的背景，可以是使用rgba
如果是图片，可以脱离父子关系，让后用定位的方式来做。

3. hsla

H 色调取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度取值范围0%~100%
L 亮度取值范围0%~100%
A 透明度取值范围0~1

background-color: hsla(120,100%,50%,1);

三. 盒子自减(box-sizing )

CSS3中可以通过box-sizing 来指定盒模型，之前我们的盒子的实际宽度是 :实际宽度 = width + padding + border，而内减属性会自动帮我们减掉 padding 和 border值，所以用了内减的盒子实际宽度就等于width。

可以分成两种情况：

1、box-sizing: border-box 计算方式为content = width – border - padding
2、box-sizing: content-box 计算方式为content = width

四.阴影

4.1 文字阴影(text-shadow)

语法： text-shadow：水平偏移垂直偏移羽化大小颜色

4.2 边框阴影(box-shadow)

语法：box-shadow：值
值说明：
（1）第一个值：Npx 阴影向水平方向偏移N个像素正数往右负数往左
（2）第二个值：Npx 阴影向垂直方向偏移N个像素正数往下负数往上
（3）第三个值：羽化大小（模糊的大小）
（4）第四个值：阴影尺寸
（5）第五个值：颜色默认值是黑色
（6）第六个参数：内外阴影默认是外阴影内阴影是inset
（7）阴影可以写多个，中间用逗号隔开
（8）阴影可以简写，但是需要注意有一些值需要补0

<html lang="en"><head>    <meta charset="UTF-8">    <title>阴影</title>    <style>        div {            width: 200px;            height: 200px;            background-color: cyan;            margin:20px auto;        }        /* 第一个值 ：Npx  阴影向水平方向偏移N个像素  正数往右 负数往左 */        div:nth-child(1){            box-shadow: -10px 0;        }        /* 第二个值 ：Npx  阴影向垂直方向偏移N个像素  正数往下 负数往上 */        div:nth-child(2){            box-shadow: 0 10px ;        }        div:nth-child(3){            box-shadow: -10px -10px ;        }        /* 第三个值控制的模糊的程度 （羽化的大小）默认值0 */        div:nth-child(4){            box-shadow: 10px 10px 100px ;        }        /* 第四个值控制的 阴影的大小 默认值0*/        div:nth-child(5){            box-shadow: 10px 10px 0px 10px ;        }        /* 第五个值控制的 颜色 默认值黑色 可以使用rgba去控制透明度*/        div:nth-child(6){            box-shadow: 10px 10px 10px 10px rgba(0,0,0,.5) ;        }        /* 第六个值控制的 内外阴影 inset是内阴影 */        div:nth-child(7){            box-shadow: 10px 10px 10px 10px rgba(0,0,0,.5) inset;        }        div:nth-child(8) {            transition:all 1s;        }        div:nth-child(8):hover{            box-shadow: 0 0 10px 5px red,0 0 15px 10px green,0 0 15px 15px blue;        }    </style></head><body>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></body></html>

五. 边框图片 (了解)

语法：border-image：值

遵从的是九宫格式切图，上下左右分别来一刀
值说明：
（1）border-image-source:url(‘border.png’); 图片路径
（2）border-image-slice:26;图片切割，不要带单位，遵从九宫格式切图法（上下左右各来一刀）
（3）border-image-repeat:round或者stretch或者repeat; round没有瑕疵，stretch默认拉伸，repeat 平铺（可能有瑕疵）
（4）简写：border-image:url(‘border.png’) 26 round;

六. 背景

6.1 控制背景图片的大小（重要）

语法：background-size：值

（1）当只有一个值的情况下，宽度实现拉伸，并且高度会保持等比例，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽高
（2）当有两个值的情况下，宽度和高度会分别拉伸到对应的值，可能会变形，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽高
（3）contain 当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘，则停止变化，（宽度或高度满足一个即可）
（4）在contain的基础上保证不留白，这就是cover的效果（宽度和高度都需要满足）

6.2 多重背景

说明：背景图片之间用逗号隔开，可以写多组，最先渲染的图片有可能会遮住后面渲染的图片

background:  url(image/1.jpg) 0 0 no-repeat,         url(image/2.jpg) 220px 0 no-repeat,             url(image/3.jpg) 430px 0  no-repeat;

6.3 背景图片的基准点(了解)

语法：background-origin：值

值说明：
（1）border-box ：忽略边框直接从边框的起始 0 ，0点平铺
（2）padding-box：默认值，忽略padding 直接从padding的起始 0 ，0点平铺
（3）content-box ：从内容部分开始平铺跟padding有关系

七. 圆角(border-radius)

border-radius的值指的是边框的圆角半径。
border-radius与margin类似，可以分别指定4个圆角的大小（左上、右上、右下、左下）.
border-radius的圆角也可以是一个椭圆。
可以分别指定4个圆角是椭圆。
border-radius的值可以是px，也可以是百分比。

八. 渐变

8.1 线性渐变(linear-gradient)

Background-image:linear-gradient(渐变线角度值 | to 方位名词 , 颜色一止色位置 , 颜色二止色位置 , 颜色三止色位置);
（1）角度默认是180度，从上到下，0度从下到上，90度从左到右，总结就是小值到大值呈现顺时针
（2）也可以是使用to 方位名词的形式去确定渐变的角度，更直观一些
（3）止色的值（颜色在什么位置停止）可以是像素，和百分比，多用百分比去控制，如果后面颜色的值小于前面颜色的值过渡会很生硬

//注意：渐变实际上相当与一张图片，因为需要加给background-image才会生效//渐变的两个要求：有区间，有颜色变化。//最简单的渐变background-image: linear-gradient(red, green);//设定渐变的方向background-image: linear-gradient(to right, red, green);//也可以设定渐变的角度background-image: linear-gradient(45deg, red, green);//设定渐变的范围background-image: linear-gradient(to right, red 20%, green 80%)//每一个区间表示渐变颜色的范围background-image: linear-gradient(to right, red 20%, green 20%)

8.2 径向渐变(radial-gradient)

background:radial-gradient(圆的半径 at 圆心点的位置,颜色一止色位置,颜色二止色位置 ,颜色三止色位置);
（1）圆的半径分为水平和垂直半径
（2）当圆的半径是一个值的情况下，是正圆，表示水平和垂直的半径都是一样的，当圆的半径为两个不一样的值情况下，是椭圆
（3）圆心点的位置默认在中间，可以接受像素和半分比及其方位名词
（4）止色的值（颜色在什么位置停止）可以是像素，和百分比，多用百分比去控制

/1. 最简单的渐变/

background-image: radial-gradient(red, green);

/2. 指定圆的半径和圆心/

background-image: radial-gradient(200px at center, red, green);

/3. 指定椭圆/

background-image: radial-gradient(200px 80px at center, red, green);

/*4. 指定范围

background-image: radial-gradient(200px at center, green 50%, red 50%);

8.3 私有前缀

作用：兼容低版本的一些高级浏览器，或者一些特定的css3属性需要添加私有前缀才起作用。
每一条css3属性合理来说都需要添加对应浏览器的前缀，以保证其兼容性:

谷歌苹果：-webkit-
火狐：-moz-
IE：-ms-
o：-o-

小细节：在手机端，一般来说只需要写一个-webkit-（针对国内的绝大部分手机端）
添加的位置：大部分都是直接添加到最前面，css2没有的属性都是添加在最前面的，有一些是css2就有的属性是添加在后面的（background：-webkit-linear-gradient（））

九. 2D转换

9.1 过渡

transition：过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

//transition-property：设置过渡属性//也可以是width,heighttransition-property:all;//transition-duration:设置过渡时间transition-duration:1s;/*过渡的时间*///transition-delay：设置过渡延时transition-delay:2s;/*2秒之后才进行动画*///transition-timing-function:设置过渡的速度//linear，ease，ease-in，ease-out，ease-in-out， steps(10)transition-timing-function:linear;

9.2 transform

transform: 转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。
transform：2D转换，元素在平面上实现移动、旋转、缩放、斜切等操作.

(1) scale缩放

注意：
scale接收的值是倍数，因此没有单位
scale可以是一个值，如果是一个值，不是说仅仅缩放宽度，高度也会等比例的缩放。
可以通过transition-origin设定旋转原点

transform: scaleX(0.5);//让宽度变化transform: scaleY(0.5);//让高度变化，注意不能写多个transform，不然会覆盖。transform: scale(0.5);//让宽度和高度同时变化

(2) translate平移

注意：
translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。
translate移动的元素并不会影响其他盒子，类似于相对定位。

transform: translateX(100px);transform: translateY(100px);transform: translate(100px, 100px);transform: translate(50%, 50%);

(3) rotate旋转

注意：
单位是deg，角度，不是px
正值顺时针转，负值逆时针转
可以通过transition-origin设定旋转原点
转换原点写在A状态，不能写在B状态

transform: rotate(360deg);//旋转360度transform: rotate(-360deg);//逆时针旋转360度

(4) skew斜切

skew在实际开发中，是用的最少的一个属性。一般来说，x和y只会倾斜其中的一个.

/*在水平方向倾斜30deg*/transform: skewX(30deg);/*在垂直方向倾斜30deg*/transform: skewY(30deg);

(5) transform-origin转换原点

通过transform-origin可以设置转换的中心原点。

transform-origin: center center;transform-origin: 40px 40px;

(6) 转换合写问题

 transform:translateX(800px)  scale(1.5)  rotate(360deg) ;

transform属性只能写一个，如果写了多个会覆盖

transform属性可以连写，但是顺序对效果有影响的，因为它会在第一个效果的基础上执行第二个效果，然后执行第三个效果（通常会把rotate放后面）

如果对transform进行过度效果的时候，初始状态和结束状态一一对应

十. 3D转换

(1) rotateX

让元素围绕着X轴进行旋转
（1）正值表示推到，负值表示鞠躬
（2）没有透视的3D是看不出来方向

(2) rotateY

围绕着Y轴进行旋转
（1）正数是逆时针（站在右边推门），负数是顺时针（站在左边推门）

(3)定义元素背过去是否可见

  backface-visibility: visible|hidden;

说明：visible表示可见，hidden表示不可见
测试贝塞尔曲线的网址：http://xuanfengge.com/easeing/ceaser/

(4) translateZ

就是在Z轴上来回移动，但是如果没有透视的情况下，完全看不出效果
小经验：translateZ和rotate结合会产生不一样的3D效果，不同的顺序的效果截然不同，如果先rotate 在translateZ 元素是在空间里面发生旋转而如果是translateZ在rotate 元素是在直线上发生旋转

（5）透视（景深）

perspective：值

说明：透视值越小，透视效果越强，值越大，透视效果越弱，透视添加在父级身上.

（6）灭点（透视点，消失点）

perspective-origin：值

说明：值可以是像素，也可以是百分比，还可以是方位名词，默认值是50%，50%（中心点）.

（7）transform-style

transform-style:preserve-3d;

作用：规定被嵌套元素如何在3D空间中显示
值说明：
flat是默认值，让子元素不保留其3D位置，
preserve-3d 让子元素保留其3D位置，加在父亲身上

小总结：透视灭点 transform-style都是添加在父级身上
关键：当元素发生3D翻转的时候，整个坐标系也跟着发生了翻转！！

十一. C3动画

动画也是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。

11.1 动画与过渡的区别：

(1) 过渡必须触发，需要两个状态的改变。
(2)动画可以一直运行下去，不需要触发。实现效果与过渡差不多:

1.通过@keyframes指定动画序列
2.通过百分比或者from/to将动画分割成多个节点
3.在各个节点中分别定义动画属性
4.通过animation将动画应用于相应的元素

11.2 animation详解:

animation是一个复合属性，一共有8个参数:
animation-name:动画名称，由@keyframes定义的
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环次数
animation-direction：设置动画在循环中是否反向运动
animation-fill-mode：设置动画时间之外的状态
animattion-play-state:设置动画的状态。

值说明：
（1）自定义动画名
（2）动画的持续时间单位是s或者ms
（3）动画的曲线
（4）动画从何时开始
（5）控制动画执行的次数没有单位，一直执行：infinite
（6）控制动画是否逆序播放默认值normal 逆序：alternate
（7）控制动画的播放和暂停默认值是播放：running 暂停：paused
（8）动画最后的停留位置 forwards 让动画停留在最后一帧
动画一定要先写animation 然后搭配@keyframes去写自定义的动画

    <style>        .box {            width: 200px;            height: 200px;            background-color: cyan;            position: absolute;            left: 0;            top: 0;            animation: donghua 2s ease ;        }        @keyframes donghua {            0% {                width: 200px;                height: 200px;                background-color: cyan;                border-radius: 0;            }            100%{                width: 400px;                height: 400px;                background-color: green;                border-radius: 50%;            }        }    </style></head><body>    <div class="box"></div></body>

11.3 帧动画

steps（帧数）

其实就是让动画分成多少步去执行，steps（）里面的数值是总画面数 - 1 ，在制作精灵图的时候每个画面的宽度尽量一致，并且建议在一行里面摆放.

11.4 animate.css库的使用

官网：https://daneden.github.io/animate.css/
作用：将一切常见的动画直接封装，开发者不需要考虑实现过程，只需要添加对应的类就能实现动画效果
使用步骤：
（1）将下载下来的animate.css 引入到你的项目中；
（2）去官网获取想要的效果给对应的元素添加上animated 类（必填）和你想要的效果的类；

12. 弹性布局 flex

阮一峰的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

阅读全文

0 0

CSS3新增特性

一.选择器

1. 关系选择器 （复习）

2. 属性选择器 ：通过属性来选择对应的元素

3. css3新增的：

4。伪类选择器 （小重点）

5. 伪元素 before after （重点）

5. 其他选择器

二. 颜色

1. opacity

2. rgba

3. hsla

三. 盒子自减(box-sizing )

四.阴影

4.1 文字阴影(text-shadow)

4.2 边框阴影(box-shadow)

五. 边框图片 (了解)

六. 背景

6.1 控制背景图片的大小 （重要）

6.2 多重背景

6.3 背景图片的基准点(了解)

七. 圆角(border-radius)

八. 渐变

8.1 线性渐变(linear-gradient)

8.2 径向渐变(radial-gradient)

8.3 私有前缀

九. 2D转换

9.1 过渡

9.2 transform

(1) scale缩放

(2) translate平移

(3) rotate旋转

(4) skew斜切

(5) transform-origin转换原点

(6) 转换合写问题

十. 3D转换

(1) rotateX

(2) rotateY

(3)定义元素背过去是否可见

(4) translateZ

（5）透视 （景深）

（6）灭点（透视点，消失点）

（7）transform-style

十一. C3动画

11.1 动画与过渡的区别：

11.2 animation详解:

11.3 帧动画

11.4 animate.css库的使用

12. 弹性布局 flex

1. 关系选择器（复习）

2. 属性选择器：通过属性来选择对应的元素

4。伪类选择器（小重点）

6.1 控制背景图片的大小（重要）

（5）透视（景深）