CSS3 边框
CSS3 边框
用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。
border-radius
box-shadow
border-image
CSS3 圆角
在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。在 CSS3 中，很容易创建圆角。 border-radius 属性被用于创建圆角：这是圆角边框！在div中添加圆角元素：
div
{
border:2px solid;
border-radius:25px;
}
CSS3 盒阴影
CSS3 中的 box-shadow 属性被用来添加阴影:
在div中添加box-shadow属性
div
{
box-shadow: 10px 10px 5px #888888;
}
CSS3 边界图片
有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：
border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：
在 div 中使用图片创建边框:
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
CSS3 圆角
CSS3 border-radius 属性
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。
CSS3 border-radius - 指定每个圆角
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
CSS3 背景
CSS3中包含几个新的背景属性，提供更大背景元素控制。
background-image
background-size
background-origin
background-clip
CSS3 background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat; }
CSS3 background-size 属性
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
重置背景图像：
div{ background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;}
伸展背景图像完全填充内容区域：
div{ background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;}
CSS3的background-Origin属性
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
CSS3 多个背景图像
CSS3 允许你在元素上添加多个背景图像。
在 body 元素中设置两个背景图像：
body{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
CSS3 background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box; }
CSS3 渐变（Gradients）
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
CSS3 线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
线性渐变 - 从上到下（默认情况下）
下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
#grad { background-image: linear-gradient(#e66465, #9198e5);}
线性渐变 - 从左到右
下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：
#grad {
height: 200px;
background-image: linear-gradient(to right, red , yellow);}
线性渐变 - 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：
#grad { height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);}
使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
带有指定的角度的线性渐变：
#grad { background-image: linear-gradient(-90deg, red, yellow);}
使用多个颜色结点
下面的实例演示了如何设置多个颜色结点：
带有多个颜色结点的从上到下的线性渐变：
#grad { background-image: linear-gradient(red, yellow, green);}
使用透明度（transparent）
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：
从左到右的线性渐变，带有透明度：
#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}
重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
一个重复的线性渐变：
#grad { /* 标准的语法 */ background-image: repeating-linear-gradient(red, yellow 10%, green 20%);}
CSS3 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
颜色结点均匀分布的径向渐变：
#grad { background-image: radial-gradient(red, yellow, green);}
径向渐变 - 颜色结点不均匀分布
颜色结点不均匀分布的径向渐变：
#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%);}
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
形状为圆形的径向渐变：
#grad { background-image: radial-gradient(circle, red, yellow, green);}
不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值：
closest-side
farthest-side
closest-corner
farthest-corner
带有不同尺寸大小关键字的径向渐变：
#grad1 { background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);}
#grad2 { background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);}
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：
一个重复的径向渐变：
#grad { background-image: repeating-radial-gradient(red, yellow 10%, green 15%);}
CSS3 文本效果
CSS3中包含几个新的文本特征。
text-shadow
box-shadow
text-overflow
word-wrap
word-break
CSS3 的文本阴影
CSS3 中，text-shadow属性适用于文本阴影。
指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：
h1{ text-shadow: 5px 5px 5px #FF0000;}
CSS3 box-shadow属性
CSS3 中 CSS3 box-shadow 属性适用于盒子阴影
div { box-shadow: 10px 10px 5px #888888;}
接下来给阴影添加颜色
div { box-shadow: 10px 10px grey;}
接下来给阴影添加一个模糊效果
div { box-shadow: 10px 10px 5px grey;}
阴影的一个使用特例是卡片效果
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;}
CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容
p.test1 { white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip; }
CSS3的换行
如果某个单词太长，不适合在一个区域内，它扩展到外面：
CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：
允许长文本换行:
p {word-wrap:break-word;}
CSS3 单词拆分换行
CSS3 单词拆分换行属性指定换行规则：
p.test1 { word-break: keep-all;}
p.test2 { word-break: break-all;}
CSS3 字体
CSS3 @font-face 规则
以前 CSS3 的版本，网页设计师不得不使用用户计算机上已经安装的字体。
使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
使用您需要的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
提示：URL请使用小写字母的字体，大写字母在IE中会产生意外的结果
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：
<style>
@font-face
{ font-family: myFirstFont;
src: url(sansation_light.woff);
}
div{
font-family:myFirstFont;}
</style>
使用粗体文本
您必须添加另一个包含粗体文字的@font-face规则：
@font-face{ font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;}
