CSS3学习总结

一、什么是CSS3

• CSS3是CSS的最新标准。CSS3向后兼容早期的CSS版本。CSS3比CSS有更多优化和新增功能。

• CSS的具体介绍在我上一篇博客里有详细总结。

二、CSS3前缀

• CSS3前缀用于区分并兼容各大主流浏览器对于CSS新功能的支持，在属性前面通过添加前缀来实现。

例如，Safari和Chrome的前缀是-webkit

div {
   border :1px solid green;
   -webkit-border-radius: 24px;
}

现今一些常用的浏览器所需前缀如图

三、圆角

• 通过border-radius属性可以给任何元素设置“圆角”

div {
   border-radius: 20px;
   background-color: green;
   color: white;
}

效果如图，也就是使本来默认的方形元素的四角不同程度的变成圆角

• border-radius的属性也可以通过（左上角，右上角，右下角，左下角）的顺序进行设置。

border-radius: 0 0 20px 20px;

• 另外，border-radius还可以用来创建一个圆形。当border-radius的属性值设置为正方形元素本身的一半长度的时候，也就是让四角圆角接起来就变成了一个圆形。

四、阴影

• box-shadow属性可以为元素增加阴影效果。box-shadow的属性值使用的时候必须按顺序设置，

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
各属性值的具体效果大家可以自己去尝试。

• 阴影的属性值可以选择为负值，例如：
  h-shadow - 阴影将在框的左侧
  v-shadow - 阴影将在框上方
  blur - 不允许使用负值
  spread - 负值会导致阴影缩小
• 设置多个阴影：可以通过在同一个规则中使用 ","来定义多个阴影。

box-shadow: 0 0 10px 4px #FF6347, 
0 0 10px 30px #FFDAB9, 
30px 0 20px 30px #B0E0E6;

• 文本阴影：text-shadow属性定义一个或多个以逗号分隔的阴影效果，应用于当前元素的文本内容
  
  对于CSS文本阴影属性，offset-x和offset-y值是必需的。color值不是必需的，但由于文本阴影的默认值是透明的，除非指定颜色值，否则不会显示文本阴影。
  创建多个文本阴影的方法和box-shadow的方法相同，都是使用逗号。

五、伪类

• CSS3中的伪类允许我们在不适用javascript等脚本的情况下去设置web页面中某些特定的元素的属性。
  伪类通常以 “:”(冒号)开头。:first-child和:last-child是较为常用的伪类。
  :first-child将会匹配该元素中的第一个子元素。
  :last-child则反之，匹配最后一个子元素。

#parent p:first-child {
   color: green;
   text-decoration: underline;   
}

这段代码的意思就是对于p的第一个子元素，实行大括号里的样式方案。

• 伪元素：伪元素用于选择元素的特定部分。
  在CSS中有五个伪元素，每个都以一个双冒号(::)开头：
  ::first-line- 选择器中文本的第一行
  ::first-letter - 选择器中文本的第一个字母
  ::selection - 选择用户选择的元素部分
  ::before - 在元素之前插入一些内容
  ::after - 在元素之后插入一些内容

p::first-line {
   color: #AE4141;
}
p::selection{
   background: #AE4141;
   color: #fff;
}

代码意思为分别给p中文本的第一行和选择后的文本设置样式。大家可以自行尝试。
而::before和::after作用是在所指定元素的前面和后面添加各种内容。

六、自动换行

• word-wrap属性允许对长单词进行自动换行处理。
  它的值可以为：
  normal
  break-word
  当设置为break-word的时候，根据字面意思也能知道，就是当装文本的盒子横向装不下长度过长的文本后，就会自动换行。

七、渐变

• 线性渐变：CSS3渐变(linear-gradient)使您能够显示两个或多个指定颜色之间的平滑过渡。 CSS3定义了两种类型的渐变：线性(Linear)和径向(Radial)。
  为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

div {
   float: left;
   width: 300px; 
   height: 100px;
   margin: 4px;
   color: #FFF;  
   background:linear-gradient(DeepSkyBlue, Black);
}

• 渐变方向：渐变的方向是可以被改变的。只需要在渐变颜色前增加想要设置的渐变方向的起始方向就好了。这个方向可以是left，right，bottom，top，还可以是多少deg

background:-webkit-linear-gradient(left, blue, green, white);
background:-webkit-linear-gradient(100deg, blue, green, white);

• 重复线性渐变 repeat-linear-gradient()函数用于重复线性渐变：

 background:-webkit-repeating-linear-gradient(blue, green 20px);

可以自己尝试

• 径向渐变：径向渐变是渐变的一种，涉及多个属性值，

background: radial-gradient(shape size at position, start-color, ..., last-color);

shape 确定圆的类型；

size 定义渐变的大小；

position 定义渐变的位置；

start-color, …, last-color 用于指定渐变的起止颜色。

八、背景图

• 层叠的背景图：CSS3中支持同时使用多个背景图片。
  通过","逗号分隔可以设置多个背景图。 第一个图像将出现在顶部，最后一个在底部。
  在下面的例子中，我们有两个背景图片：第一个对齐底部和右侧; 第二个与左上角对齐。

div {
  width: 400px;
  height: 300px;
  background-image: url('https://7nsts.w3cschool.cn/images/w3c/header-logo.png'),url('https://img.w3cschool.cn/attachments/image/20180125/1516870677823170.jpg');
  background-position: right bottom, left top;
  background-repeat: no-repeat;
} 

• opacity属性：CSS中的opacity属性支持为元素增加一个不透明度。

#img1 {
   opacity: 1;
}
#img2 {
   opacity: 0.5;
}
#img3 {
   opacity: 0.25;
}

opacity的值必须介于（0.0~1.0）之间。0.0（完全透明）、1.0（完全不透明）

九、过渡与转换

• 转换 (transition) 允许我们在限定的时间内从一个属性值转换到另一个属性值。

  transition-property - 指定要转换的属性
  transition-duration - 指定转换发生的持续时间
  transition-timing-function - 指定转换的速度在其持续时间内如何变化
  transition-delay -指定过渡效果的延迟（以秒为单位）
  在下面的例子中，div元素的宽度和高度都是100px，并有一个红色的背景。 我们为width属性指定了一个过渡效果，持续时间为3秒：

div {
   width: 100px;
   height: 100px;
   background: red;
   color: #fff;
   transition: width 3s;
}
div:hover {
   width: 250px;
}

如果您将光标悬停在div元素上，则会从左向右移动。

• transition-timing-function属性指定过渡效果的速度曲线。
  它可以有以下值：
  ease - 动画开始缓慢，然后加速（默认值）。
  ease-in - 缓步开始，然后加速，突然停止。
  ease-out - 快速启动，但减速停止。
  ease-in-out - 类似于缓解，但更加微妙的加速和减速。
  linear - 匀速转换。

• 旋转 CSS3中transform(允许您翻转，旋转，缩放和倾斜元素。transform(旋转)是一种让元素更改形状，大小和位置的效果。
  rotate() 方法根据给定的deg顺时针或逆时针旋转一个元素。负值将导致逆时针旋转。
  transform: rotate(15deg);

• transform-origin属性允许您更改已转换元素的位置。 该属性的默认值是50%50%，对应于元素的中间。
  在下面的例子中，我们将transform-origin属性和transform-rotate一起使用。 x轴（水平）的原点从左侧设定为30%。 y轴（垂直）的原点从上方设定为80%。

div.empty-div {
   position: relative;
   height: 100px;
   width: 100px;
   margin: 30px;
   padding: 10px;
   border: 1px solid black;
}
div.green-div {
   padding: 50px;
   position: absolute;
   background-color: #8bc34a;
   border: 1px solid white;
   transform: rotate(15deg);
   transform-origin: 30% 80%;
}

0 0与左上相同，100%100%与右下相同。transform-origin属性必须与transform属性一起使用。

• translate() 方法从当前位置移动一个元素

 transform:translate(120px, 60px);

意思是元素向右移动120px，向下移动60px

• skew() 也是transform的属性值，通过给元素设置X轴和Y轴的倾斜角度值来实现倾斜。和rotate的旋转不同，skew是倾斜。transform: skew(45deg);

• **scale()**方法根据已设定的宽度和高度参数来增加或减少元素的大小。 1代表原始尺寸，2代表原始尺寸的两倍，依此类推。transform: scale(0.7, 0.7);

• 一次可以使用多个转换。 同时旋转和缩放元素的大小就是一个例子。对元素应用多个变换很简单， 只是用空格分开它们。

十、动画

• @keyframes规则当您在@keyframes规则中指定CSS样式时，动画将在某些时间从当前样式逐渐变为新样式。要使动画起作用，必须将动画绑定到元素。以下示例将更改元素的背景颜色三次：动画完成50%，完成70%，动画完成100%时。

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: w3cschool;
    animation-duration: 1s;
}
@keyframes w3cschool {
    0%  {background-color: red;}
    50%  {background-color: yellow;}
    70%  {background-color: blue;}
    100% {background-color: green;}
}

animation-name是自己定义的动画名称 ，animation-duration是动画总计的持续时间；@keyframes规则中是规定的具体的动画属性。

• (animation-timing-function)动画定时功能指定动画的速度曲线。 它可以有以下值：
  ease - 指定一个慢启动的动画，然后快速，然后慢慢结束（默认值）
  linear - 从开始到结束指定一个具有相同速度的动画
  ease-in - 指定一个慢启动的动画
  ease-out - 指定一个缓慢结束的动画
  ease-in-out - 指定一个缓慢的开始和结束的动画animation-timing-function: linear;
• animation-delay 定义动画开始之前的延迟。单位秒s
• animation-iteration-count 属性确定动画重复的次数。animation-iteration-count: 6;
  负数则不会启动
• animation-direction属性指定如何应用关键帧，值可以设置为：
  normal - 默认值，这意味着它从0%到100%前进。
  reverse - 从100%到0%的相反方向播放关键帧
  alternate - 动画首先向前，然后向后，然后向前。
  alternate reverse - 动画首先倒退，然后前进，然后倒退。

div {
   animation-name: colorchange;
   animation-duration: 4s;
   animation-timing-function: ease-in;
   animation-delay: 2s;
   animation-iteration-count: infinite;
   animation-direction: reverse;
}

这个例子是讲一个命名为colorchange的动画，持续时长为四秒，规定为一个慢启动的动画，开始前延迟两秒，无限重复，然后先倒放再正放再倒放。