前端学习之路css3(01)-基础知识

CSS3 简介

一些重要的模块的增加或加强，选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。

CSS3 边框

在CSS3中主要添加了3中边框属性；

border-radius

定义边框的圆角，例子。

box-shadow

用来添加背景阴影，例子。

border-image

用图像创造一个边框。round平铺，stretch拉伸，例子。

CSS3 圆角

指定圆角的例子

当我们需要单独设置每个圆角时，需要知道以下规则，border-radius。

1个参数(radius: 10px;)：代表四个角全设置；

2个参数(radius: 10px 10px;)：值1代表左上和右下，值2代表右上和左下；

3个参数(radius: 10px 10px 10px;)：值1代表左上，值2代表右上和左下，值3右下；

4个参数(radius: 10px 10px 10px 10px;)：值1左上，值2右上，值3右下，值4左下。

实例

还可以设置椭圆边角

CSS3 背景

CSS3中添加几个新的属性，以提供更大的背景元素控制。

background-image，可以设置多个背景图片，每个用逗号分隔开，例子1、例子2。

background-size，我们可以重新指定背景图片的大小，例子。

background-origin，指定背景图像的位置区域，border-box边框，padding-box边距，content-box内容处，例子。

background-clip，背景图片从指定位置开始绘制，border-box边框，padding-box边距，content-box内容处，例子。

CSS3 渐变

CSS3渐变表示可以在两个或者多个元素之间平稳的过渡，定义了两种渐变方式。

线性渐变，向上/下/左/右/对角方向；

径向渐变，由它们的中心定义；

线性渐变

为了创建一个线性渐变，我们至少定义两种以上的颜色结点，即我们想要平稳过渡的颜色，同时还可以设置一个起点和方向。

它的基本语法是：background: linear-gradient(direction, color-step1, color-step2…)，默认情况下方向是自上而下的。

线性渐变-从上到下

线性渐变-从左到右

线性渐变-角度

线性渐变-多颜色、均匀不均匀分布

线性渐变-使用透明度

线性渐变-重复的线性渐变

径向渐变

径向渐变由它的中心定义。

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

径向渐变-颜色结点均匀分布

径向渐变-颜色结点不均匀分布

径向渐变-形状为圆形的径向渐变

径向渐变-不同尺寸大小

径向渐变-重复的径向渐变

CSS3 文本效果

我们将了解到这些文本属性

1. text-shadow

适用于文本阴影，定义了水平阴影、垂直阴影、模糊的距离，以及阴影的颜色，例子。

2. box-shadow

适用于盒子阴影，参见。

3. text-overflow

如何显示溢出的文本，例子。

4. word-wrap

如果某个单词太长，不适合在一个区域内，它扩展到外面，CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字，例子。

5. word-break

CSS3 单词拆分换行属性指定换行规则，例子。

更多新文本属性

CSS3 字体

以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用CSS3，网页设计师可以使用他/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的CSS3版本有关于@font-face规则描述。

您”自己的”的字体是在 CSS3 @font-face 规则中定义的。

具体参见