CSS3进阶指南：从基础到高级特性解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52476758/article/details/123296786

1. 初识CSS3

1.1 什么是CSS3

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。在编写CSS3样式时，不同的浏览器可能需要不同的前缀，它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性。

在这里插入图片描述

2. 边框

2.1 圆角效果 border-radius

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

不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好

实心上半圆：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
    /* 50px 0 0 50px 实心左半圆  0 50px 50px 0 实心右半圆*/
    }

实心圆：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半

div{
    height:100px;/*与width设置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    }

2.2 阴影 box-shadow

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

参数介绍：

在这里插入图片描述

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的

添加多个阴影可以用逗号隔开

阴影模糊半径与阴影扩展半径的区别：

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

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

2.3 为边框应用图片 border-image

语法：

在这里插入图片描述

repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复
Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）
Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远

#border_image {
    margin:0 auto;
	height:100px;
	line-height:100px;
	text-align:center;
	font-size:30px;
	width:450px;
	border:15px solid #ccc;
    border-image:url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 50 repeat;
	}

3. 颜色相关

3.1 颜色之RGBA

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

R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。A为透明度参数，取值在0~1之间，不可为负值。

3.2 渐变色彩

线性渐变：

在这里插入图片描述

参数：

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

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

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

4. 文字与字体

4.1 text-overflow与word-wrap

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

语法：text-overflow:clip|ellipsis，其中clip表示剪切，ellipsis表示显示省略标记。

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

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行

语法：world-wrap:normal|break-world，其中normal表示控制连续文本换行，break-world表示内容将在边界内换行

4.2 嵌入字体@font-face

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

// 语法
@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}
// 这样设置后，可以像使用普通字体一样在(font-*)中设置字体样式,比如：
p {
    font-size :12px;
    font-family : "字体名称";
    /*必须项，设置@font-face中font-family同样的值*/
}

4.3 文本阴影text-shadow

用来设置文本的阴影效果

语法：text-shadow: X-Offset Y-Offset blur color;

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

5. 与背景相关的样式

5.1 background-origin

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

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

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

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

5.2 background-clip

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

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

5.3 background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩

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

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

5.4 multiple backgrounds

语法如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
// 拆分
background-repeat : repeat1,repeat2,...,repeatN;
background-clip : clip1,clip2,...,clipN;
background-color : color;

注意：

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

background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat 0 0 / 75% 55%,                url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom / 50% 40%;

6. CSS3选择器(上)

6.1 属性选择器

在这里插入图片描述

<!--html代码：-->
<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>
<!--css代码-->
a[class^="icon"]{
  background: green;
  color:#fff;
}
a[href$="pdf"]{
  background: orange;
  color: #fff;
}
a[title*="more"]{
  background: blue;
  color: #fff;
}

6.2 结构性伪类选择器

6.2.1 root

:root选择器，是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>

:root{background:orange}与html {background:orange;}等效，但建议使用:root

6.2.2 not

:not选择器称为否定选择器，可以选择除某个元素之外的所有元素

// 想给表单中除submit按钮之外的input元素添加红色边框
input:not([type="submit"]){
  border:1px solid red;
}

6.2.3 empty

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

p:empty {
  display: none;
}

6.2.4 target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素

<!--HTML代码：-->
<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>
<!--CSS代码：-->
#brand:target{ /*这里的:target就是指id="brand"的div对象*/
  display:block;
}
#jake:target {
  background: blue;
  color: #fff;
}

6.2.5 first-child与last-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。

:last-child选择器选择的是元素的最后一个子元素

ul > li:first-child {
 color: red;
}
ul > li:last-child {
  border-bottom: none;
}

6.2.6 nth-child(n)与nth-last-child(n)

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0

:nth-last-child(n)选择器从某父元素的最后一个子元素开始计算，来选择特定的元素

ol > li:nth-child(2n){	// 将偶数行列表背景色设置为橙色。
  background: orange;
}
ol > li:nth-last-child(5){ // 选择列表中倒数第五个列表项，将其背景设置为橙色
  background: orange;
}

6.3 first-of-type选择器与nth-of-type(n)选择器

:first-of-type选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素

:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。

/*定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色*/
.wrapper > p:first-of-type {
  background: orange;
}
/*将容器“div.wrapper”中偶数段数的背景设置为橙色。*/
.wrapper > p:nth-of-type(2n){
  background: orange;
}

6.4 last-of-type选择器与nth-last-of-type(n)选择器

:last-of-type选择的是父元素下的某个类型的最后一个子元素

:nth-last-of-type(n) 选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始

/*将容器“div.wrapper”中最后一个段落元素背景设置为橙色*/
.wrapper > p:last-of-type{
  background: orange;
}
/*将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。*/
.wrapper > p:nth-last-of-type(3){
  background: orange;
}

6.5 only-child选择器与only-of-type选择器

:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素，即匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素

:only-of-type选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。:only-of-type是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素

.post p:only-child {	// 控制仅有一个子元素的背景样式
  background: orange;
}
.wrapper > div:only-of-type {
  background: orange;// 修改容器中仅有一个div元素的背景色为橙色。
}

7. CSS选择器(下)

7.1 :enabled选择器与:disabled选择器

<!--html 可用不可用  -->
<input type="text" name="name" id="name" placeholder="可用输入框"  />
<input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />

<!--css-->
input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}
input[type="text"]:disabled {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.15);
  color: rgba(0,0,0,.15);
}

7.2 :checked选择器

<!--html 选中与未选中 -->
<input type="checkbox" checked="checked" id="usename" />
<span>√</span>

<!--css-->
input[type="checkbox"] + span {
  opacity: 0;
}
input[type="checkbox"]:checked + span {
  opacity: 1;
}

7.3 ::selection选择器

::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}
// 用鼠标选中文字，才会有效果

7.4 :read-only选择器与:read-write选择器

:read-only伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

:read-write 主要用来指定当元素处于非只读状态时的样式。

<div>
    <label for="address">地址:</label>
    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
</div>
<div>
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="大漠" />
</div>

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}
input[type="text"]:-moz-read-write{
  border-color: #f36;
}
input[type="text"]:read-write{
  border-color: #f36;
}

7.5 ::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

<div class="box effect">
  <h3>Shadow Effect </h3>
</div>

.effect::before, .effect::after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
/*上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效*/
https://www.imooc.com/video/5865

8. CSS3中的变形与动画(上)

8.1 旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转

<!--HTML代码：-->
<div class="wrapper">
  <div></div>
</div>
<!--CSS代码：-->
.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

8.2 扭曲 skew()

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状

skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形），第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

<!--HTML代码：-->
<div class="wrapper">
  <div>我变成平形四边形</div>
</div>
<!--CSS代码：-->
.wrapper {
  width: 300px;
  height: 100px;
  border: 2px dotted red;
  margin: 30px auto;
}
.wrapper div {
  width: 300px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background: orange;
  -webkit-transform: skew(45deg);
  -moz-transform:skew(45deg) 
  transform:skew(45deg);
}

8.3 缩放 scale()

缩放 scale()函数 让元素根据中心原点对对象进行缩放

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

div:hover {
  -webkit-transform: scale(1.5,0.5);
  -moz-transform:scale(1.5,0.5)
  transform: scale(1.5,0.5);
}
// 注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的

scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

8.4 位移 translate()

translate()函数可以将元素向指定的方向移动，即使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）

.wrapper div {
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
// 让不知道宽度和高度的元素实现水平、垂直居中

8.5 矩阵 matrix()

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵

.wrapper div {
  -webkit-transform: matrix(1,0,0,1,50,50);
  -moz-transform:matrix(1,0,0,1,50,50);
  transform: matrix(1,0,0,1,50,50);
}
// 通过matrix()函数来模拟transform中translate()位移的效果

8.6 原点 transform-origin

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处,通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

transform-origin取值和元素设置背景中的background-position取值类似

在这里插入图片描述

.transform-origin div {
  -webkit-transform-origin: left top;
    -moz-transform-origin: top left;
  transform-origin: left top;
}
// 通过transform-origin改变元素原点到左上角

8.7 过渡属性transition属性

通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

transition-property:指定过渡或动态模拟的CSS属性

具有过渡的CSS属性主要有:

注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数

主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：
transition-delay:指定开始出现的延迟时间，即当改变元素属性值后多长时间开始执行

<body><div></div></body>
div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
  	transition-delay:.18s;
}
div:hover {
  width: 400px;
}
// 让容器在hover状态下宽度从200px慢慢过渡到400px,整个过渡持续0.5s,过渡动画速度是加速，

想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开

例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

<body><div></div></body>
div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
  	transition-delay:.18s;
}
div:hover {
  width: 400px;
}
// 让容器在hover状态下宽度从200px慢慢过渡到400px,整个过渡持续0.5s,过渡动画速度是加速，