状态伪类选择器

• :enabled

  • 作用：选择器匹配每个已启用的元素

  • 主要适用于：表单元素

• :disabled

  • 作用：选择器匹配每个被禁用的元素

  • 主要适用于：表单元素

• :checked

  • 作用：选择器匹配每个已被选中的 input 元素

  • 适用于：适用于单选按钮和复选框

[type="text"]:enabled{
    background-color: yellowgreen;
}
[type="text"]:disabled{
    background-color: #ccc;
}
​
[type="checkbox"]:checked{
    width:100px;
    height:100px;
}

兼容性

 

常用元素状态、用户行为伪类列表

 

伪元素选择器

:before

• 作用：在元素内部【最开始】位置生成内容 ---开始标签之后

• 语法：元素:before{content:"内容"}

:after

• 作用：在元素内部【最后】位置生成内容 - 结束标签之前

• 语法：元素:before{content:"内容"}

注：必须定义content属性

• 默认以行内形式存在

before与after 兼容性

 

说明：

• 双冒号支持ie9+

• 单冒号支持ie8+

:placeholder

主流浏览器四大内核：

webkit: -webkit-

gecko: -moz-

presto: -o-

trident: -ms-

• 设置对象文字占位符的样式

• ::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，

• 默认的文字占位符为浅灰色。

注：

<input type="text" placeholder="占位符" />
​
input::-webkit-input-placeholder {
    color: #999;
}
input:-ms-input-placeholder { // IE10+
    color: #999;
}
input::-moz-placeholder { // Firefox
    color: #999;
}

兼容

 

• Chrome/Safari/Opera 低版本支持::-webkit-input-placeholder

• Edge支持:-ms-input-placeholder

属性选择器、伪类选择器与类选择器优先级一致  0010
伪元素与元素名称选择器优先级一致  0001

CSS3 字体

字体阴影

• 作用：为文字添加阴影。

• 语法

  • 每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成 ，它们之间“空格”隔开

    text-shadow:0 0 10px red;
     
    text-shadow:10px 0 10px red;
      
    text-shadow:-10px 0 10px red;

    • 水平位置 垂直位置 模糊值 颜色

      • 正值向右向下偏移

      • 负值 向左向上偏移

  • 添加多个阴影

    • 阴影值之间用逗号隔开

    • 书写顺序越靠前显示越靠上

    .box:nth-child(4){
         text-shadow:10px 10px  red,20px 20px green,30px 30px pink;
    }

自定义字体

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用 CSS3，网页设计师可以使用的任何字体，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

语法

//定义字体
@font-face{
	font-family：“myfont”;
	src:url("字体文件1.woff") format("woff")..
	
}

应用字体：
.box{
	font-family:"myfont";
}

说明：format表示字体格式

兼容 

应用：

iconfont 添加至项目的使用

• 登录iconfont

   

• 挑选图标加入购物车

  

   

• 将图标添加至项目

  

   

  • 还未创建项目需要在此创建项目

    

     

• 进入我的项目——选择fontclass方式，查看在线链接

   

• 将文件引入项目

  <link href="http://at.alicdn.com/t/font_2474231_62smug0rv6r.css">

• 挑选类名并应用于页面

  

   

  <i class="iconfont icon-caidan">

CSS3 边框

通过 CSS3，能够创建圆角边框，向矩形添加阴影替代之前的切背景图处理

圆角

• 作用：为元素添加圆角边框

  

   

  • 圆角半径（水平半径、垂直半径） border-radius:30px/10px;

  • border-radius: 左上角 右上角 右下 左下

• 单个边定义

  • 语法： border-*-radius：1-2个空格隔开的值

    • 2个值 时分别表示 水平半径 、垂直半径

  • border-top-left-radius 定义了左上角的弧度

  • border-top-right-radius 定义了右上角的弧度

  • border-bottom-right-radius 定义了右下角的弧度

  • border-bottom-left-radius 定义了左下角的弧度

  • border-bottom-left-radius 定义了左下角的弧度

  • 【先上下后左右】

• 常用取值

  • px

  • 百分比

    • 分别相对于宽高计算

  • 不允许负值

• 简写border-radius

  • 语法

    • 空格 隔开

      • 四个值：左上角、右上角、右下角、左下角 水平和垂直半径

      • 三个值：左上角、右上角和左下角，右下角

      • 两个值：左上角与右下角、右上角与左下角

      • 一个值： 四个圆角值相同

• 兼容

   

阴影

• 作用：为设置一个或多个阴影

• 语法

  • box-shadow: 阴影水平偏移值 垂直偏移 模糊值 外延值 阴影颜色 内阴影;

  • 空格隔开

• 取值说明

  • none 无阴影

  • 第1个长度值用来设置对象的阴影水平偏移值。可以为负值

  • 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

  • 第3个长度值用来设置对象的阴影模糊值。不允许负值

  • 第4个长度值用来设置对象的阴影外延值。不允许负值

  • color 可选。阴影的颜色

  • inset：设置对象的阴影类型为内阴影【可以省略不写 默认外阴影】

• 多个阴影

  • 用逗号分隔

  • 第一个阴影在最上面,书写顺序越靠前，越靠上

• 兼容

   

CSS3 背景

概述：CSS3更新增了新的背景属性，提供对元素背景更灵活的控制

多个背景图像

CSS3中可以通过background-image给元素添加多个背景图像

background-image:url("背景图像1.jpg"),url("背景图像2.jpg");

• 不同的背景图像【逗号】隔开，也可以给不同的图片设置多个不同的属性（如背景位置，背景重复等）

• 书写顺序越靠前，显示越靠上

  • 单独定义

  .box { 
  background-image: url(img_flwr.gif), url(paper.gif); 
  background-position: right bottom, left top; 
  background-repeat: no-repeat, repeat; 
  }

  • 简写

  .box {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  }

background-size 背景图像的大小

• 概述：CSS3以前，背景图像大小由图像的实际大小决定，CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小

  background-size:宽度 高度;

• 取值

  • px：用长度值指定背景图像大小。不允许负值。

  • 百分比：用百分比指定背景图像大小。不允许负值。

    • 当属性值为百分比时，参照背景图像的background-origin区域大小进行换算

  • auto：背景图像的真实大小。

  • cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

    

     

  • contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

    

例：

 .box{
     width:200px;
     height:200px;
     background:url("pic.jpg") no-repeat;
}

.box:nth-child(1){
	background-size:100px 200px;
}

.box:nth-child(2){
	background-size:100px auto;
}

.box:nth-child(3){
	background-size:50% 50%;
}

.box:nth-child(4){
  background-size:cover;
}

.box:nth-child(5){
  background-size:contain;
}

background-origin背景图像的起始点

• 作用：指定背景图像的起始点

• 取值

  • padding-box：背景图像的起始点从padding区域开始。（默认值）

  • border-box：背景图像的起始点从border区域开始。

  • content-box：背景图像的起始点从width,height区域开始。

  

   

background-clip背景绘制区域

• 作用：指定背景绘制区域

• 取值

  • border-box 【默认值】背景绘制至边框盒区域

  • padding-box 背景绘制至内边距盒区域

  • content-box 背景绘制至内容盒区域

兼容

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

 

CSS3 渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3 定义了两种类型的渐变（gradients）通过 background-image指定： 线性渐变（Linear Gradients）- 即沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变。 径向渐变（Radial Gradients）- 即以起点为中心，从起点到终点颜色从内到外进行圆形渐变。

线性渐变

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

均匀分布的渐变

语法： background:linear-gradient(颜色1,颜色2);

• 颜色之间逗号隔开

例：
.box:nth-child(1){
   background:linear-gradient(red,blue);
 }

 

颜色不均匀分布的渐变（自定义颜色节点）

语法： background:linear-gradient(颜色1 节点1,颜色2 节点2);

• px

• 百分比

.box:nth-child(2){
	background:linear-gradient(red 0,red 50px,blue 60px,pink);
}
.box:nth-child(3){
	background:linear-gradient(red 0,red 50%,blue 60%,pink);
}

渐变重复

• 语法：repeating-linear-gradient( )

  .box:nth-child(4){
      background:repeating-linear-gradient(red 0,red 10px,green 10px,green 20px);
   }

  

   

渐变方向

• 使用起始位置关键字

  • to right 方向自左向右

  • to top 方向自下而上

  • to bottom 方向自上而下

  • to left 方向自右而左

  • to right top 方向朝向右上角

  • to left bottom方向朝向左下角

    

     

.box{
   background:linear-gradient(to right,red,blue);
}

使用角度

• 0deg 相当于 to top

• 90deg 相当于 to right

.box{
    background:linear-gradient(90deg,red,blue);
}

 

 

多重渐变

• 语法：【逗号】隔开

• 提示：书写顺序越【靠前】显示越【靠上】

   .box{
   background-image:linear-gradient(red,blue),linear-gradient(yellow,pink);
              background-size:50px 50px,100px 100px;
              background-repeat: no-repeat;
              background-position:center center;
   }

  

   

径向渐变

radial-gradient()用于创建一个表示两种或多种颜色径向渐变的图片。

径向渐变由中心点定义。

颜色节点均匀分布

语法：background:radial-gradient(颜色1,颜色2);

• 颜色之间【逗号】隔开

控制颜色节点

语法：radial-gradient(颜色 节点1，颜色 节点2，颜色 节点3...)

• 节点位置与颜色 之间【空格】隔开

• 节点取值

• px

  • 百分比

例：
background:radial-gradient(red 0,red 10px,blue 10px,blue 20px);

例：
background:radial-gradient(red 0,red 50%,blue 60%);

渐变重复

语法：repeating-radial-gradient()

例：
background:repeating-radial-gradient(red 0,red 10px,blue 10px,blue 20px);

渐变的形状

• ellipse 表示椭圆形[默认值]

• circle 表示圆形

语法：background:radial-gradient(形状,颜色1，颜色2)

例：
  background:radial-gradient(ellipse,red,blue);

渐变的圆心

语法：background:radial-gradient(形状 at 水平位置 垂直位置,颜色1，颜色2)

• px（表示距左上角的0，0的坐标位置）

• 百分比

• 关键字可以是以下词的组合

  • left center right

  • top center bottom

例：表示圆心在右侧中心
background:radial-gradient(circle at 100% 50%,red,blue);

例：表示圆心在左上角
background:radial-gradient(circle at left top,red,blue);  

• 多重渐变

  • 语法：逗号隔开

  • 提示：书写顺序越靠前显示越靠上

• 兼容

  表格中的数字表示支持 @media 规则的第一个浏览器的版本号。

  紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

   

CSS3 用户界面

resize

• 作用：规定是否可由用户重置元素的尺寸。

• 取值

  • none 不允许重置元素大小。

  • both 允许重置宽度、高度。

  • horizontal 允许重置宽度。

  • vertical 允许重置高度。

• 注意

  • 需要配合 overflow 属性有效，值可以是 auto、hidden 或 scroll。

     

box-sizing

• 作用：规定盒子组成模式

  • 标准盒子

  • content+border+padding+margin

  • 怪异盒子(IE8)

  • content(padding，border)+margin

• 取值

  • content-box：定义宽高【不包括】内边距和边框 【标准盒模型】

    • 盒子的总大小 = width/height +padding+border + margin

  • border-box：定义宽高【包括】内边距和边框 【怪异盒模型】

    • 盒子的总大小 = width/height + margin

兼容性：