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 规则中定义的。