首页 > 代码库 > 9.16 CSS3 预习
9.16 CSS3 预习
CSS3
1. 圆角
border-radius：边框圆角的圆角半径
四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同
2.图片
border-image：有了CSS3的border-image属性，你可以使用图像创建一个边框：border-image属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：
border-image-source：用于指定要用于绘制边框的图片的位置；
border-image-slice：图像边界向内偏移；
border-image-width：图像的边界的宽度；
border-image-outset：用于指定在边框外部绘制 border-image-area 的量；
border-image-repeat：这个例子演示了如何创建一个border-image 属性的按钮。
3.阴影
box-shadow：边框阴影。例如 box-shadow: 50px 50px 5px #888888 第一个50px是指阴影距离边框的左右距离，值也可以是负的，向右为正，向左为负。第二个 50px是指阴影边距离边框的上下距离，值也可以是负的，向下为正，向上为负。5px是距离上一个<div>的距离，距离越远，阴影面积就越大，也会越模 糊。#888888是指阴影的颜色。
4.背景
background-image 添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
background-size 指定背景图像的大小。CSS3中可以指定背景图片，可以在不同的环境中指定背景图片的大小。可以指定像素或百分比大小。指定的大小是相对于父元 素的宽度和高度的百分比的大小。
background-Origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
background-clip 背景剪裁属性是从指定位置开始绘制
5.渐变
渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
线性渐变：（Linear Gradients）- 向下/向上/向左/向右/对角方向
例如：
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
上面代码表示从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
径向渐变：（Radial Gradients）- 由它们的中心定义
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
shape： 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
size 参数定义了渐变的大小。它可以是以下四个值：
closest-side
farthest-side
closest-corner
farthest-corner
6.文本效果
text-shadow：文本阴影。 text-shadow: 5px 5px 5px #FF0000 和边界阴影效果相同
box-shadow：盒子阴影 box-shadow: 10px 10px; grey
9.16 CSS3 预习