本文深入探讨CSS3新增的边框、背景、渐变、文本及2D效果等属性，通过实例展示如何运用这些特性提升网页设计。从圆角边框到文本阴影，再到复杂的2D变换，全面解析CSS3的高级应用。
CSS3概述
CSS3是原CSS技术的升级版本，新增了一些属性。对CSS3已完全向后兼容，所以不必改变现有的设计。浏览器将永远支持CSS2。在开发过程中应该考虑浏览器的支持问题。
一、CSS3 新增属性
（1）边框
（2）背景
（3）渐变效果
（4）文本
（5）2D
二、CSS3 新增属性详解
2.1 边框样式
笔记：
border: 1px solid rgba(0, 0, 0, 0.1)
设定元素的边框为 1 像素宽、实线、颜色使用 rgba 来表达。
其中，rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值（0-255）。
最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1，越接近 1，代表透明度越低。
2.1.1 圆角边框：border-radius
CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。
例如：
border-radius: 15px;
表示同时将每个圆角的"水平半径"（horizontal radius）和"垂直半径"（vertical radius）都设置为15px
这是一个简写属性，可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。
（1）border-top-left-radius：左上角
（2）border-top-right-radius：右上角
（3）border-bottom-left-radius：左下角
（4）border-bottom-left-radius：右下角
简写
border-radius值的个数以及每个值对应控制的位置：
border-radius 15px /*设置四个角的边界半径为15px*/
border-radius 15px 20px /*设置左上角和右下角的边界半径为15px，右上角和左下角为20px*/
border-radius 15px 20px 25px /*设置左上角的边界半径为15px，右上角和左下角为20px，右下角为25px */
border-radius 15px 20px 25px 30px /*设置左上角为15px，右上角为20px，右下角为25px，左下角为30px*/
2.1.2 图形边框：border-image
border-image 属性是一个简写属性，用于设置以下属性：
| 属性 | 描述 |
|---|---|
| border-image-source | 用在边框的图片的路径。 |
| border-image-slice | 图片边框向内偏移。 |
| border-image-width | 图片边框的宽度。 |
| border-image-outset | 边框图像区域超出边框的量。 |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
border-image:url(border-image.png) 40 10px 20px round;
/*其中border-image属性可以用以下一组属性代替*/
border-image-source: url(border-image.png);
border-image-slice: 40;
border-image-width: 10px;
border-image-outset: 20px;
border-image-repeat: round;
2.1.3 盒子阴影： box-shadow
语法：
box-shadow: h-shadow v-shadow blur spread color inset
| 属性 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的偏移量。允许负值。 |
| v-shadow | 必需。垂直阴影的偏移量。允许负值。 |
| blur | 可选。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。 |
| spread | 可选。阴影的尺寸。取正值时，阴影扩大；取负值时，阴影收缩。默认为0。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下 |
box-shadow: 10px 10px 5px #888888;
盒子阴影效果的使用实例
（1）文字卡片
<div class="card">
<div class="header">
<h1>1</h1>
</div>
<div class="container">
<p>January 1, 2016</p>
</div>
</div>
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;
}
div.header {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 40px;
}
div.container {
padding: 10px;
}
（2）图片效果
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>Hardanger, Norway</p>
</div>
</div>
div.polaroid {
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;
}
div.container {
padding: 10px;
}
2.2 背景样式
2.2.1 background-size
background-size 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
/*给背景图片增加该属性之后，原图片会按照指定大小进行缩放*/
background-size:100px 100px;
/*给背景图片增加该属性之后，拉伸填充背景区域*/
background-size:40% 100%;
2.2.2 background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
background-origin: padding-box|border-box|content-box;
（1）padding-box：背景图像相对于内边距框来定位
（2）border-box：背景图像相对于边框盒来定位
（3）content-box：背景图像相对于内容框来定位
2.2.3 background-image
CSS3中可以通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
body
{
background-image:url(bg1.png),url(bg2.png);
}
2.3 渐变效果
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡2.3.1 linear-gradients
（1）线性渐变
语法：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
background-image: linear-gradient(#e66465, #9198e5);
（2）从左到右的线性渐变：
background-image: linear-gradient(to right, red , yellow);
（3）线性渐变 - 对角
/*左上角到右下角*/
background-image: linear-gradient(to bottom right, red, yellow);
（4）从左到右的线性渐变，带有透明度：
/* rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：
0 表示完全透明，1 表示完全不透明。*/
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
（5）重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
2.3.2 radial-gradient
（1）径向渐变
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
background-image: radial-gradient(red, yellow, green);
2.4 文本效果
2.4.1 text-shadow
（1）文本阴影效果
/* 水平阴影，垂直阴影，模糊的距离，以及阴影的颜色 */
color:#ffff00;
text-shadow: 5px 5px 5px red;
2.4.2 text-overflow
（1）文本溢出属性
text-overflow属性指定当文本溢出包含它的元素，应该发生什么
语法
text-overflow: clip | ellipsis | string;
（1）clip：超出方框部分直接删除
（2）ellipsis：超出方框部分显示省略号
（3）string：超出方框部分显示指定的字符串
text-overflow: ellipsis
text-overflow: clip
其他新增文本属性不一一列出，需要的时候再去官网研究。
2.4.3 字体
使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户
在 CSS3 @font-face 规则中定义
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
2.5 2D效果
使用2D效果可以使得元素拥有旋转，倾斜等静态效果
语法
transform：translate() | rotate() | scale() | skew() | matrix()
2.5.1 translate()
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动，
/* 从左边元素移动50个像素，并从顶部移动100像素 */
transform: translate(50px,100px);
2.5.2 rotate()
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
/* 元素顺时针旋转30度 */
transform: rotate(30deg);
2.5.3 scale()
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
/* 转变宽度为原来的大小的2倍，和其原始大小3倍的高度 */
transform: scale(2,3)
2.5.4 skew()
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
/*在X轴和Y轴上倾斜20度30度 */
transform: skew(30deg,20deg)
2.5.5 matrix()
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
总结：
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body
{
margin:30px;
background-color:#E9E9E9;
}
div.polaroid
{
width:294px;
padding:10px 10px 20px 10px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate_left
{
float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
transform:rotate(7deg);
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="1.png" alt="" width="284" height="213">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>
</body>
</html>
效果：
扫一扫
764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
