CSS3 学习总结

一、边框：

1、圆角效果：

border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

2、阴影效果：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

• 参数介绍：
  X轴偏移量：必需。水平阴影的位置。允许为负值。
  Y轴偏移量：必须。垂直阴影的位置。允许为负值。
  阴影模糊半径：可选。模糊距离。
  阴影扩展半径：可选。阴影的尺寸。
  阴影颜色：可选。阴影的颜色。省略默认为黑色。
  投影方式：可选。（设置inset时为内部阴影方式，如果省略为外阴影方式）。
• 如果添加多个阴影，只需用逗号隔开即可。如：

.box_shadow{    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;}

• 阴影模糊半径与阴影扩展半径的区别
  阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。
  阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小。

3、为边框应用图片：

border-image:(图片路径) 图片边框向内偏移 图片边框的宽度 边框图像区域超出边框的量 图片边框类型（平铺[repeat]、铺满[round]或拉伸[stretch]）;

二、颜色：

1、RGBA：

RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。
语法：

color：rgba(R,G,B,A)

以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。
代码示例：

background-color:rgba(100,120,60,0.5);

2、渐变色彩 ：

             // 渐变方向，等价于180deglinear-gradient(to bottom, #fff, #999);渐变类型，径向为radial        表示颜色的起始点和结束点，可以有两个至多个色值

参数：
第一个参数：指定渐变方向，可以用“角度”的关键词或英文来表示：

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

第一个参数省略时，默认为“180deg”，等同于“to bottom”。
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

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

三、文字与字体

1、text-overflow 与 word-wrap：

text-overflow用来设置是否使用一个省略标记（…）标示对象内文本的溢出。
语法：

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    // 表示控制连续文本换行|表示内容将在边界内换行

normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

2、嵌入字体@font-face：

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

语法：

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

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。
比如：

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

3、文本阴影text-shadow：

ext-shadow可以用来设置文本的阴影效果。
语法：

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color：是指阴影的颜色，其可以使用rgba色。
比如，我们可以用下面代码实现设置阴影效果。

text-shadow: 0 1px 1px #fff

四、与背景相关的样式

1、设置元素背景图片的原始起始位置：

语法：

background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

2、用来将背景图片做适当的裁剪以适应实际需要。

语法：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

3、设置背景图片的大小：

以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
语法：

background-size: auto | <长度值> | <百分比> | cover | contain

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px
50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

4、多重背景：

多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的缩写拆解成以下形式：

background-image:url1,url2,...,urlN;background-repeat : repeat1,repeat2,...,repeatN;backround-position : position1,position2,...,positionN;background-size : size1,size2,...,sizeN;background-attachment : attachment1,attachment2,...,attachmentN;background-clip : clip1,clip2,...,clipN;background-origin : origin1,origin2,...,originN;background-color : color;

注意：
用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 “/” 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。

五、选择器：

1、属性选择器：

属性选择器 功能描述 E[att^=”val”] 选择匹配元素E，且E元素定义了属性att，其属性值以val**开头**的任何字符串。 E[att$=”val”] 选择匹配元素E，且E元素定义了属性att，其属性值以val**结尾**的任何字符串。 E[att*=”val”] 选择匹配元素E，且E元素定义了属性att，其属性值以val**包含**的任何字符串。

2、结构性伪类选择器—root

:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。
“:root”选择器等同于元素，简单点说：

:root{background:orange}html {background:orange;}

3、结构性伪类选择器—not

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

form {  width: 200px;  margin: 20px auto;}div {  margin-bottom: 20px;}input:not([type="submit"]){  border:1px solid red;}

4、结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
示例显示：
比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。
HTML代码：

<p>我是一个段落</p><p> </p><p></p>​

CSS代码：

p{ background: orange; min-height: 30px;}p:empty {  display: none;}​

5、结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。
示例展示
点击链接显示隐藏的段落。
HTML代码：

<h2><a href="#brand">Brand</a></h2><div class="menuSection" id="brand">    content for Brand</div>

CSS代码：

.menuSection{  display: none;}:target{/*这里的:target就是指id="brand"的div对象*/  display:block;}

6、结构性伪类选择器—first-child

结构性伪类选择器—first-child
“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
示例演示
通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。
HTML代码：

<ol>  <li><a href="##">Link1</a></li>  <li><a href="##">Link2</a></li>  <li><a href="##">link3</a></li></ol>

CSS代码：

ol > li{  font-size:20px;  font-weight: bold;  margin-bottom: 10px;}ol a {  font-size: 16px;  font-weight: normal;}ol > li:first-child{  color: red;}

7、结构性伪类选择器—last-child

:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，

ul>li:last-child{background:blue;}

8、结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

9、结构性伪类选择器—nth-last-child(n)

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

10、first-of-type选择器

adding