CSS3学习笔记(一)

CSS3 是 CSS2 的升级版本，3 只是版本号，它在 CSS2.1 的基础上增加了很多强大的新功能。
在编写 CSS3 样式时，由于现时不同浏览器支持程度不同，需要加上不同的浏览器前缀来区分。
它表示该 CSS 属性或规则尚未成为 W3C 标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

前缀	浏览器
-webkit	chrome 和 safari
-moz	firefox
-ms	IE
-o	opera

总是为兼容性操碎了心呐….
后来才知道，原先写的 CSS 都是 3-，真正 3 的魅力完全没体现出来

CSS3的特性

简单的说就是带来的好处，CSS3 把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

CSS3 简化了前端开发工作人员的设计过程，加快页面载入速度。

先大体总结一下比较让人眼前一亮的特性：

• 选择器
  以前我们通常用 class、 ID 或 tagname 来选择 HTML 元素，CSS3 的选择器强大的难以置信。它们可以减少在标签中的 class 和 ID 的数量更方便的维护样式表、更好的实现结构与表现的分离。
• 圆角效果
  以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。
• 块阴影和文字阴影
  可以对任意 DIV 和文字增加投影效果。
• 色彩
  CSS3 支持更多的颜色和更广泛的颜色定义。新颜色 CSS3 支持 HSL ， CMYK ，HSLA and RGBA。
• 渐变效果
  以前只能用 Photoshop 做出的图片渐变效果，现在可以用 CCS 写出来了。IE 中的滤镜也可以实现。
• 个性化字体
  网页上的字体太单一？使用 @Font-Face 轻松实现定制字体。还可以“画”出一些图标来
• 多背景图
  一个元素上添加多层背景图片。
• 边框背景图
• 变形处理
  你可以对 HTML 元素进行旋转、缩放、倾斜、移动、甚至以前只能用 JavaScript 实现的强大动画。
• 多栏布局
  可以让你不用使用多个 div 标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。
• 媒体查询
  针对不同屏幕分辨率，应用不同的样式。
• ……

边框

首先，就从边框开始吧！

圆角效果

这个效果主要使用了 border-radius 属性：是向元素添加圆角边框。

div.test{
    /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 
    border-radius: 5px 4px 3px 2px; 
    /* 所有角都使用半径为10px的圆角 */
    border-radius:10px;
}
/* 实心圆 */
div.circle{
    height:100px;/*与width设置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    }
/*实心左半圆*/   
div.semi-circle{ 
    height:100px;
    width:50px;
    background:#9da;
    border-radius:50px 0 0 50px;
    }

它使用的单位不止是 px，也可以使用百分比之类的，但是效果不太理想

阴影

使用的是 box-shadow 属性：是向盒子添加阴影。支持添加一个或者多个。
语法：box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
前两个是必填的，其他的可以不写，阴影颜色默认是黑色，投影方式可以写在任何位置，当是 inset 时，是内部阴影；省略为外阴影

/*外阴影效果，比较有立体感啦*/
.box_shadow{
  box-shadow:4px 2px 6px #333333; 
}
/*多阴影效果，用逗号分割*/
.box_shadow{
    box-shadow:4px 2px 6px #f00,
      -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

其实上面参数的介绍挺抽象的，反正我看不懂

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为 0 时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

至于X轴偏移量和Y轴偏移量值可以设置为负数 ；可以理解为正负就是方向

边框背景图

顾名思义就是为边框应用背景图片，它和我们常用的 background 属性比较相似，使用的是 border-image 属性

#border-image{
   background:#F4FFFA;
   width:210px; height:210px; border:70px solid #ddd;
   border-image:url(borderimg.png) 70 repeat  
}

一个矩形，有四个边框。如果应用了边框图片， 图片会自动被切割分成四等分。用于四个边框。所以要设置下切割高度，比如上面的 70px
图片的延伸方式有三种：round（平铺）、 repeat（重复）、 stretch（拉伸）
难度没多少，效果自己写下看看就知道了

颜色相关

CSS3 支持 RGBA，是的，后面的 A 是透明度，用法：
background-color:rgba(100,120,60,0.5);

下面再来说说渐变色彩：
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里只针对线性渐变的 W3C 标准语法来分析其用法，使用 linear-gradient 属性

p{
  background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
}

可以看出是支持多种颜色的，两个一组，对应开始和结束；那么第一个参数是啥呢？肯定和方向（角度）有关

角度	英文	作用
0 deg	to top	从下向上
90 deg	to right	从左向右
180 deg	to bottom	从上向下
270 deg	to left	从右向左
-	to top left	右下角到左上角
-	to top right	左下角到右上角

文字与字体

text-overflow 用来设置是否使用一个省略标记（…）标示对象内文本的溢出。
但是 text-overflow 只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果

/* ellipsis:显示省略标记；clip:表示剪切 */
p{
	text-overflow: ellipsis; 
	overflow: hidden; 
	white-space: nowrap; 
}

word-wrap 也可以用来设置文本行为，当前行超过指定容器的边界时是否断开换行。
它有两个可以设置的属性：
normal : 控制连续文本换行（测试应该遇到长单词是不换行）
break-word: 表示内容将在边界内换行（就算是整个单词，太长也会换行）
normal 为浏览器默认值，break-word 设置在长单词或 URL 地址内部进行换行，此属性不常用，用浏览器默认值即可。

嵌入字体@font-face

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

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

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

其实利用它可以完成 字体图标 的效果，这个我感觉还是非常实用的，不需要再用 PS 切图了，具体的实现打算专门写一篇，毕竟看了下比较复杂的….(其实是功力不够)

发现一篇写的很好的文章，很详细：https://www.w3cplus.com/content/css3-font-face

文本阴影

text-shadow 可以用来设置文本的阴影效果。语法为：
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将 Blur 值设置为 0
Color：是指阴影的颜色，其可以使用 rgba 色。

背景相关

CSS3 支持设置元素背景图片的原始起始位置。
语法：background-origin ： border-box | padding-box | content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
需要注意的是，如果背景不是 no-repeat，这个属性无效，它会从边框开始显示。

裁剪可以使用属性 background-clip
语法：background-clip ： border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。
no-clip 表示不裁切，和参数 border-box 显示同样的效果。backgroud-clip 默认值为 border-box。

还有可以设置背景图片的大小，以长度值或百分比显示，还可以通过 cover 和 contain 来对图片进行伸缩。
语法：background-size: auto | <长度值> | <百分比> | cover | contain
参数：
auto：默认值，不改变背景图片的原始高度和宽度；
<长度值>：成对出现如 200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

然后就是多重背景，常见的写法一般有两种：

.demo{
    width: 300px;
    height: 140px;
    border: 1px solid #999;
    background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
                      url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
                      url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
    background-position: left top, 100px 0, 200px 0;
    background-repeat: no-repeat, no-repeat, no-repeat;
}
.task {
    width: 300px;
    height: 140px;
    border: 1px solid #999;
    
    background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat, 
               url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
               
}

如果有 size 值，需要紧跟 position 并且用 “/“ 隔开 ([/background-size])；
background-color 只能设置一个。

选择器

在 CSS2 中引入了一些属性选择器，而 CSS3 在 CSS2 的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与 CSS2 的属性选择器共同构成了 CSS 功能强大的属性选择器

关于这个我曾经整理过一篇文章见：CSS/jQuery选择器总结

简单说这三种选择器是：

/* 选择 a 标签中 class 以 column 开头的 */
a[class^=column]{
    background:red;
}
/* 选择 a 标签中 href 属性以 doc 结尾的 */
a[href$=doc]{
    background:green;
}
/* 选择 a 标签中 title 属性包含 box 的 */
a[title*=box]{
    background:blue;
}

CSS3 还增加了一些伪类选择器，下面列举一些，全套的参考上面那篇文章：

• :root 选择器
  从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在 HTML 文档中，根元素始终是 <html>
  可以用来设置页面的背景颜色

• :not 选择器
  否定选择器，和 jQuery 中的 :not 选择器一模一样，可以选择除某个元素之外的所有元素。
  就拿 form 元素来说，比如说你想给表单中除 submit 按钮之外的 input 元素添加红色边框，CSS 代码可以写成

  input:not([type="submit"]){
    border:1px solid red;
  }

• :empty 选择器
  表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格也算不为空。

• :target 选择器
  目标选择器，用来匹配文档(页面)的 url 的某个标志符的目标元素。比如经常用的锚链接，在段落设置相应的 id 属性；在连接使用 #id 来定位（使用 href）

  /* 点击#id连接后id为brand元素的样式 */
  #brand:target {
    background: orange;
    color: #fff;
  }
  #jake:target {
    background: blue;
    color: #fff;
  }
  #aron:target {
    background: red;
    color: #fff;
  }

  如果只定义一个 :target{} 默认对应的是全部的链接是 #id 元素，也就是说点击他们反映在各自 id 元素上的样式是一致的，但最多只能标记一个使用样式，好像描述的不太清楚，自己测试一下就知道了
  测试地址：http://www.w3school.com.cn/tiy/t.asp?f=css_sel_target

• :nth-child(n) 选择器
  用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数 n 的起始值始终是 1，而不是 0。也就是说，参数 n 的值为 0 时，选择器将选择不到任何匹配的元素。
  类似的还有 nth-last-child(n) 就是倒着来的，以及类似的 E:nth-of-type 指定子元素的，比如匹配奇数行这样写：

  ol > li:nth-child(2n+1){
    background: green;
  }
  /* 选择倒数第五个 */
  ol > li:nth-last-child(5){
    background: green;
  }

• :enabled 选择器
  在 Web 的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器 :enabled 对这些表单元素设置样式。

• ::selection 伪元素
  它是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的
  不过在 Firefox 浏览器还需要添加前缀：::-moz-selection

  ::selection{
    background: orange;
    color: white;
  }
  ::-moz-selection{
    background: orange;
    color: white;
  }

• ::before 和 ::after
  这两个主要用来给元素的前面或后面插入内容，这两个常和 “content” 配合使用，使用的场景最多的就是清除浮动。
  我也看到好多配合 @font-face 来使用字体图标的

其他

使用 input 定义 button 的时候，要想按钮处于禁用状态可以直接在标签上加 disabled 属性，类似 checked 这样的标识，如果使用 css 的方式实现可以试试下面两种方案：

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    pointer-events: none;
    cursor: not-allowed;
    box-shadow: none;
    opacity: .65;
}