本文深入探讨CSS3的高级特性，包括前缀使用、颜色、渐变、文本处理、字体嵌入、阴影效果、圆角、边框图片、背景裁剪、多重背景及选择器的应用。适合前端开发者提升技能。
写在前面的话
想必各位前端大神对于css这样的基础技术已经掌握的炉火纯青，挥洒自如了吧。但是对于前端小白的我来说，还没有如此功力。所以，我重新系统的学习了一次css3课程，并总结了一份笔记，希望可以给并不是很了解css3的童鞋们一点点小小的启示，可以让你们在写css样式时，更轻松一点，更简单一点。????
前缀
由于现在css3中部分属性还没有成为W3C标准的一部分，属于浏览器的私有属性，所以不同的浏览器需要不同的前缀。
| 前缀 | 浏览器 |
|---|---|
| -webkit | Chrome/Safari |
| -moz | firefox |
| -ms | IE |
| -o | opera |
颜色
- RGBA:
rgba(R,G,B,A)中参数A为透明度，取值在0-1之间，不能为负数。 - 渐变色linear-gradient：
语法：linear-gradient(to bottom,#fff,#999);
参数：
- 第一个参数为渐变方向，其值可以为角度(0deg,90deg,180deg,270deg)或者英文单词(to top,to right,to bottom,to left,tp top left,to top right).
- 第二三个参数分别表示颜色的起始值和最终值，可以传多个参数。
eg: background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
文字
- text-overflow:设置是否用省略标记标示对象内的文本溢出。
语法：text-overflow:clip(剪切)/ellipsis(显示省略标记).
（注： 只设置这个属性是无法实现用省略号表示溢出的，还需要配置以下两个属性。） - white-space
语法： white-space:nowrap。强制文本在一行内显示。 - overflow
语法: overflow:hidden。溢出内容隐藏。 - word-wrap
语法：word-wrap:normal(表示控制连续文本换行)/break-word(表示内容将在边界内换行)。==此属性不常使用。== - @font-face:嵌入字体。
作用：加载服务器端的字体文件，让浏览器可以显示用户电脑中没有安装的字体。
用法：
@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}
复制代码之后就可以像使用普通字体一样使用。 eg: font-family: "My Font"
6. text-shadow:设置文本阴影效果。
语法：text-shadow: X-Offset Y-Offset blur color;
(Blur:表示阴影模糊程度，不能为负值)
eg: text-shadow: 0 1px 1px #fff
背景和边框
- border-radius圆角效果：单位可以是px、em、百分比。
(eg: border-radius:5px 4px 3px 2px 顺序为左上 右上 右下 左下) - box-shadow阴影：,向盒子添加阴影，支持添加多个。
语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式:inset，默认为外阴影];
若是需要添加多个阴影，用逗号隔开即可。
(eg: box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; )
(eg: .box-shadow: 4px 2px 6px #333333; )
注： 阴影模糊半径与阴影扩展半径的区别
阴影模糊半径：此参数可选，其值只能是正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
-
border-image边框图片
语法：border-image:url(图片路径) 70 70 70 70 (此四个值为切割图片宽度，单位可以是px，省略单位表示百分比，遵循顺时针规律设置) repeat(图片延展方式：round-平铺，repeat-重复，stretch-拉伸) -
background-origin:设置元素背景图片的起始位置。
语法：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。 -
background-size:设置背景图片大小。以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
语法：background-size: auto | <长度值> | <百分比> | cover | contain
取值说明：
- auto：默认值，不改变背景图片的原始高度和宽度；
- <长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
- <百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
- cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
- contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
- multiple background:多重背景。
这个属性就是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 只能设置一个。
- background-position: 设置背景图像的起始位置。
选择器
作用：用于选择需要添加样式的元素。
- :root(伪类选择器)
“:root”选择器等同于html元素，简单点说：
:root{background:orange}
等同于
html {background:orange;}
复制代码- not(结构性伪类选择器)：否定选择器，可以选择除某个元素之外的所有元素。
eg: div:not([class="kat"]) {
background-color: orange;
}
复制代码- :empty: empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
eg:p:empty {
display: none;
}
复制代码- :target目标选择器: 用来匹配文档(页面)的url的某个标志符的目标元素。
当URL中href的名称与后面标签的名称相同，则点击url，匹配相应的id，执行target中定义的样式。
<h2>
<a href="#brand">
Brand
</a>
</h2>
<div class="menuSection" id="brand">
content for Brand
</div>
<h2>
<a href="#jake">
Brand
</a>
</h2>
<div class="menuSection" id="jake">
content for jake
</div>
<h2>
<a href="#aron">
Brand
</a>
</h2>
<div class="menuSection" id="aron">
content for aron
</div>
复制代码// 点击标签匹配相应的id，对应id的div,变为下面所定义的样式
#brand:target {
background: orange;
color: #fff;
}
#jake:target {
background: blue;
color: #fff;
}
#aron:target {
background: red;
color: #fff;
}
复制代码- :first-child: 选择父元素的第一个子元素。
注意是子元素并非后代元素。也可以认为是在文档中第一次出现的这个标签。 - :last-child:选择父元素的最后一个子元素。
- :nth-child(n):定位某个父元素的一个或多个特定的子元素。
eg: nth-child(2n),选择偶数行列数。 - :nth-last-child(n):从某父元素的最后一个子元素开始计算，来选择特定的元素。
- :first-of-type:定位一个父元素下的某个类型的第一个子元素。
/*我要改变第一个段落的背景为橙色*/
.wrapper > p:first-of-type {
background: orange;
}
复制代码- :nth-of-type(n):定位父元素中指定的某种类型的子元素。 n的值可以是整数，也可以是表达式。
- :last-of-type：选择父元素下的某个类型的最后一个子元素。
- :only-child:匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
- :only-of-type: 是表示一个元素它有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
css新增属性的第一讲，主要为大家简述以上这些内容。下一讲，将给大家介绍的是css3中最常使用的属性--动画，以及关于媒体查询和响应式设计的一些内容。欢迎关注哦
扫一扫
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
