CSS3 ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第3天什么是CSS3? 文章详细介绍CSS3新增

这是我参与「第五届青训营」伴学笔记创作活动的第3天

什么是CSS3?

CSS3是CSS（层叠样式表）技术的升级版本，是CSS2的升级版本，3只是版本号，它在CSS2.1 的基础上增加了很多强大的新功能。CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符。

CSS3的新特性

CSS3可以使用的图片和脚本来实现的效果比如：圆角、图片边框、文字阴影和盒阴景、渐变、个性化字体、多图片背景、过渡、动画、多栏布局、媒体查询等

Border-radius
Box-shadow
Text-shadow
线性渐变和射线渐变
Transform
Transition
Animation
绘制特殊图形

一、Border-radius

定义

使用 CSS3 border-radius 属性，可以给任何元素制作 "圆角"。

语法

border-radius：指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

<div class="rcorners1"></div>
<div class="rcorners2"></div>
<div class="rcorners3"></div>

.rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px; 
width: 200px;
height: 150px; 
}
.rcorners2 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px; 
width: 200px;
height: 150px; 
}
.rcorners3 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px; 
width: 200px;
height: 150px; 
}

二、阴影

定义

box-shadow 向框添加一个或多个阴影， text-shadow 属性向文本设置阴影。

语法

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

text-shadow: h-shadow v-shadow blur color;

三、背景渐变

定义

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变，你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

语法

线性渐变：background: linear-gradient(direction, color-stop1, color-stop2, ...);

#grad {
width: 300px;
height: 300px;
background: linear-gradient(to bottom right, red , blue); 
}

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

background: linear-gradient(angle, color-stop1, color-stop2);

径向渐变：background: radial-gradient(center, shape size, start-color, ..., last-color);

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

#grad {
width: 300px;
height: 300px;
background: radial-gradient(red, yellow, green);
}

#grad {
width: 300px;
height: 300px;
background: radial-gradient(red 5%, green 15%, blue 60%); 
}

四、转换

定义

转换的效果是让某个元素改变形状，大小和位置。 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
skew()方法，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

语法

transform: none|transform-functions;

.box {
width: 100px;
height: 80px;
background-color: rgba(255,0,0,.8);
transform: translate(50px,100px);
 }

.box {
width: 100px;
height: 80px;
background-color: rgba(255,0,0,.8);
transform: rotate(30deg);}

.box {
width: 100px;
height: 80px;
background-color: rgba(255,0,0,.8);
transform: scale(2,3); 
}

.box {
width: 100px;
height: 80px;
background-color: rgba(255,0,0,.8);
transform: skew(30deg,20deg);
}

五、过渡

定义

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。

语法

过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。

可过渡的样式：

不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

取值为颜色
取值为数值
阴影（box-shadow,text-shadow）
转换（transform）
背景渐变（gradient）

六、动画

定义

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

Css动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

要创建 Css3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。
@keyframes 规则内指定一个 Css 样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。指定至少这两个Css3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

语法

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

辨析：CSS动画相关属性

transition, transform, animation；我分别理解为过渡，变换，动画。

transitions

其作用是：平滑的改变CSS的值。无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画。

transform

transform指变换，拉伸，压缩，旋转，偏移.

animation

@keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

七、绘制特殊图形

//利用圆角绘制圆
.box{
width: 200px;
height: 200px;
background-color: #1EC7E6;
border-radius: 50%;
}

//利用边框绘制三角形
.box{
width:0;
height: 0;
border-top:50px solid red;
border-left:50px solid blue;
border-right:50px solid orange;
border-bottom:50px solid green;
}

//利用边框绘制梯形
.box{
width: 100px;
height: 0;
border-bottom: 80px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;}

CSS3 ｜ 青训营笔记