前端之CSS3知识整理1

1.CSS3简介

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强 或新增 了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

1.1CSS3的现状

• PC端浏览器支持程度差，需要添加私有前缀

• 移动端支持优于PC端

• 不断改进中

• 应用相对广泛

关于私有前缀：

在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性

目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。

一般来说，移动端更新迭代很快，对CSS3支持良好, 因此我们在移动端没必要写太多的前缀，因为移动端的ios和Android的浏览器都是webkit内核。

谷歌、苹果浏览器：-webkit-                 火狐浏览器：-moz-
IE浏览器：-ms-                                      欧朋浏览器：-o-

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;

    /*谷歌浏览器和safari浏览器的前缀 -webkit-*/
    -webkit-transform: rotate(45deg);
    /*火狐浏览器的前缀 -moz-*/
    -moz-transform: rotate(45deg);
    /*ie浏览器的前缀 -ms-*/
    -ms-transform: rotate(45deg);
    /*opera浏览器的前缀 -o-*/
    -o-transform: rotate(45deg);
    /*规范化后的写法*/
    transform: rotate(45deg);
}

2.CSS3选择器

2.1关系选择器

 

2.2属性选择器

 

2.3伪类选择器

伪类选择器的语法：都带有一个 冒号 :

2.3.1child系列（重点）

 

/* 只有当前p元素是唯一的子元素时才被选中 (了解) */

p:only-child {

      background-color: blue;

}

  /* n 从 0开始, 取值 0, 1, 2, 3...*/
    /* 几n+几, n 要放前面 */
    /* 找前面 3 个 */
    li:nth-child(-n+3) {
      background-color: red;
    }

    /* 找最后 3 个 */
    li:nth-last-child(-n+3) {
      background-color: red;
    }

2.3.2其他伪类选择器

:of-type系列，  用法与child系列很像，但是找的是子元素中对应类型的下标（了解，用的不多）
:focus    查找获取到焦点的文本框
:checked 获得选中的checkbox
:disabled 获得不可用的框
:enabled 获得可用的框
:not(selector)选择不匹配selector的那些元素
:target  获取当前活跃的锚链接

   /* of-type 系列, 先找类型, 再编号 */
    /* 找第n个span类型的元素 */
    span:nth-of-type(2) {
      background-color: yellow;
    }

    /* 选中 第二个 ul 添加背景色 */
    ul:nth-of-type(2) {
      background-color: orange;
    }

 /* 当对象获取到焦点时的样式 */
    input:focus {
      background-color: red;
    }

/* :not 排除括号选中的元素 */
    li:not(:last-child) {
      border-bottom: 1px solid #000;
    }

 /* 匹配内容为空的元素 */
    div:empty {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }

  input[type="checkbox"]:checked {
      width: 200px;
      height: 200px;
    }

h1:target {
      font-size: 100px;
      color: red;
    }

2.4伪元素选择器

2.4.1before和after

注意事项：
//1.    必须指定content属性，可以在content属性中写入文本内容，但是通常为空字符串。
//2.    默认是行内元素，无法设置宽高，需要指定display:block或者position:absolute
E::before :在元素子节点的最前面添加一个内容。
E::after  :在元素子节点的最后面添加一个内容。

关于单冒号和双冒号问题：

关于:before与::before的区别
:before是css2中伪元素的写法，但是呢，在css3中严格规定，伪类采用单冒号，伪元素需要使用双冒号。为了兼容旧的代码，当浏览器碰到了:before之后，会自动的转换成::before。
如果需要兼容老的浏览器，比如IE678，推荐使用:before

如果不需要兼容老的浏览器，比如移动端，推荐使用::before

2.4.2其他伪元素选择器
::first-letter  :获取元素的第一个字符
::first-line   :获取元素的第一行
::selection   :获取选中的元素

  
  
  



  
导航1
  
导航2
  
导航3
  
导航4

 3.CSS3阴影

3.1如何查看css3文档

[]        表示全部可选项
||        表示或者
|        表示多选一
？       表示0个或者1个
*        表示0个或者多个
{2,3}        表示范围

3.2文字阴影

text-shadow:文字阴影

语法: text-shadow：水平偏移 垂直偏移 羽化大小(模糊度) 颜色

 h1:first-child {
      text-shadow: 2px 2px 2px red;
    }

 h1:nth-child(2) {
      text-shadow: 2px 2px 2px red, 4px 4px 4px blue, 6px 6px 6px green;
    }

//凹凸文字
 h1:first-child {
      text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
    }
 h1:last-child {
      text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
 }

 3.3边框阴影

box-shadow:边框阴影

none： 无阴影 
：第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 
：设置对象的阴影的颜色。 
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

 

4.CSS3盒子模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

• box-sizing: border-box 计算方式为content = width – border - padding(IE盒子模型)

• box-sizing: content-box 计算方式为content = width(标准盒子模型)

5.CSS3背景

在css2中已经有background属性了，用于设置盒子的背景相关的一些样式，在CSS3中新增加了几个背景相关的几个属性。

5.1background-size

用户设置背景图片的尺寸大小

//注意：这两种设置方式会导致图片失真。
/*background-size:设置背景图片的大小*/
background-size: 600px 400px;

/* 百分比是相对于盒子自身的宽度和高度 */
background-size: 100% 100%;

不失真的设置方式（等比例缩放）

/*contain保证等比例缩放,但是会出现留白*/
background-size: contain;

/*cover保证等比例缩放,并且不会留白，但是出现有一部分图片不显示*/
background-size: cover;

5.2background-clip

设置背景区域的大小

/*盒子的背景区域是整个盒子，包括边框和padding*/
/*默认值，设置背景区域包括了边框*/
background-clip: border-box;

/*背景区域只包含padding和content*/
background-clip: padding-box;

/*背景区域只包含content*/
background-clip: content-box;

5.3background-origin

设置背景图片的原点的位置，默认是padding的地方开始

background-image: url(images/bg.jpg);
/*设置原点从border开始*/
background-origin: border-box;

/*设置原点从padding开始,默认值*/
background-origin: padding-box;

/*设置原点从content开始*/
background-origin: content-box;

6.多重背景

background设置背景的时候，可以设置多个背景图片，使用逗号隔开。注意颜色只能设置一次，并且通常来说，颜色都是在最后面进行设置。

background是一个合写的属性，如果在background之前设置了background相关的样式，会被覆盖掉。

background: url(images/mn1.jpg) no-repeat top left, url("images/mn2.jpg") no-repeat right bottom, pink;

  /* 多背景指定 */
      /* 所谓多背景, 就是背景可以设置多个, 通过 , 隔开 */
      /* 注意: 如果是多背景, 要设置颜色, 需要将背景颜色, 写在最后一个中 */
      background: url(./images/mn1.jpg) left top no-repeat,
                  url(./images/mn2.jpg) right top no-repeat, pink;
    

7.渐变

7.1线性渐变

linear-gradient指沿着某条直线朝一个方向产生的渐变效果

线性渐变的核心：

• 渐变方向

• 颜色

• 渐变范围

/* 注意：渐变实际上相当于一张图片，因为需要加给background-image才会生效 */
/* 渐变的核心：渐变方向，渐变颜色, 渐变范围 */
/* background-image: linear-gradient( 方向, 颜色 范围, 颜色 范围, 颜色 范围 ); */

线性渐变需要:

1)方向

(1) 使用专有名词 to right, to top, to left, to bottom

(2) 使用角度, 0deg 往上 (记忆时钟), 顺时针旋转

2) 颜色

3.)范围 支持数值或者百分比

/* 最简单的渐变 */
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%)

7.2径向渐变

radial-gradient指从一个中心点开始沿着四周产生渐变效果

径向渐变的核心：

• 圆的大小

• 圆心的位置

• 颜色

需要:

1） 圆的大小, 圆的半径

2）圆心的位置, 坐标     支持专有名词, left top right bottom center

3）颜色 范围

/*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.过渡

8.1过渡的属性

1)如果两个状态发生改变，没有过渡，效果是瞬间变化的

2)如果加上了过渡，那么这个过程就会有动画的效果。

3)整个状态变化的过程是由浏览器来完成的，我们只需要关注开始状态与结束状态即可。

/*transition-property：设置过渡属性
/*也可以是width,height*/
transition-property:all;

/*transition-duration:设置过渡时间*/
transition-duration:1s;

/*transition-delay：设置过渡延时*/
transition-delay:2s;

/*transition-timing-function:设置过渡的速度*/
/*linear(匀速)，ease(缓动，默认值)，ease-in，ease-out，ease-in-out(慢—快-慢)， steps(10,start/end)  end默认值*/
transition-timing-function:linear;

8.2属性合写

/* 属性 时间 延时 速度 */
transition: width 1s 3s linear;

过渡的注意点：

• 过渡必须要有两个状态的变化。

• 过渡可以写在A状态，也可以写在B状态，但是如果写在B状态，那么回来的时候，就没有过渡效果了。

• 过渡延时需要放在过渡时间的后面

9. 2D转换

transform: 转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。

transform：2D转换，元素在平面上实现移动、旋转、缩放、斜切等操作 。

9.1 scale缩放

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

注意：

• scale接收的值是倍数，因此没有单位

• scale可以是一个值，如果是一个值，不是说仅仅缩放宽度，高度也会等比例的缩放。

• 可以通过transform-origin设定旋转原点，默认是transform-origin:center center,也可以设置成像素值

9.2 translate平移

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

注意：

• translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。

• translate移动的元素并不会影响其他盒子，类似于相对定位。

9.3 rotate旋转

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

注意：

• 单位是deg，角度，不是px

• 正值顺时针转，负值逆时针转

• 可以通过transition-origin设定旋转原点

9.4 skew斜切(变形)

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

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

  /扫光效果/

9.5 transform-origin转换原点

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

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

9.6 转换合写问题

 transform: translateX(800px)   scale(1.5)   rotate(360deg) ;
//1. transform属性只能写一个，如果写了多个会覆盖
//2. transform属性可以连写，但是顺序对效果影响的，因为它会在第一个效果的基础上执行第二个效果，然后执行第三个效果（通常会把rotate放后面，旋转会改变坐标轴）
//3. 如果对transform进行过渡效果的时候，初始状态和结束状态一一对应

 

/盾牌打散/