CSS3新增属性详解

1.圆角

在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。

在 CSS3 中，很容易创建圆角。

在 CSS3 中 border-radius 属性被用于创建圆角：

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

div{border:2px solid;border-radius:25px;
}

2.盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

div{box-shadow: 10px 10px 5px #888888;
}

3.背景

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;
}

可以给不同的图片设置多个不同的属性

#example1 {background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

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;
}

background-origin

background-origin 属性指定了背景图像的位置区域。

content-box, padding-box,和 border-box区域内可以放置背景图像。

/* 在 content-box 中定位背景图片： */
div{background:url(img_flwr.gif);background-repeat:no-repeat;background-size:100% 100%;background-origin:content-box;
}

background-clip

background-clip属性指定背景绘制区域。

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

示例：

<style>
#example1 {border: 10px dotted black;padding:35px;background: yellow;
}

#example2 {border: 10px dotted black;padding:35px;background: yellow;background-clip: padding-box;
}

#example3 {border: 10px dotted black;padding:35px;background: yellow;background-clip: content-box;
}
</style>

<p>没有背景剪裁 (border-box没有定义):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

效果如下：

4.渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction值（部分）	描述
to bottom	从上到下的线性渐变
to right	从左到右的线性渐变
to bottom right	从左上角到右下角的线性渐变

径向渐变语法

/* shape属性有circle圆形和ellipse椭圆（默认）两种 */
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
/* 颜色节点均匀分布的径向渐变： */
#grad {background-image: radial-gradient(red, yellow, green);
}

/* 颜色节点不均匀分布的径向渐变： */
#grad {background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

5.文本效果

属性	描述	常用属性
text-overflow	规定当文本溢出包含元素时发生的事情	clip(修剪)、ellipsis(省略号)
text-shadow	向文本添加阴影
word-break	规定非中日韩文本的换行规则	break-all(单词间换行)、keep-all(半角空格换行)
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行	break-word(长单词内部换行)

6.过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。

应用于宽度属性的过渡效果，时长为 2 秒：

div
{width:100px;height:100px;background:red;transition:width 2s;-webkit-transition:width 2s; /* Safari */
}

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

/* 规定当鼠标指针悬浮(:hover)于 <div>元素上时： */
div:hover
{width:300px;
}

div本身宽度是100px，当鼠标悬浮时，宽度变为300px，该属性2s内改变。

效果如下：

要添加多个样式的变换效果，添加的属性由逗号分隔：

/* 添加了宽度，高度和转换效果： */
div{transition: width 2s, height 2s, transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

7.多列

属性	描述
column-count	指定元素应该被分割的列数。
column-fill	指定如何填充列
column-gap	指定列与列之间的间隙
column-rule	所有 column-rule-* 属性的简写
column-rule-color	指定两列间边框的颜色
column-rule-style	指定两列间边框的样式
column-rule-width	指定两列间边框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的宽度
columns	column-width 与 column-count 的简写属性。

下面是代码演示：

<style>
.newspaper
{column-count:3;column-gap: 30px;column-rule-style: solid;column-rule-width: 3px;column-rule-color: lightblue;
}
h2
{column-span:all;
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
<h2>英国维斯米斯特教堂碑文</h2>
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

最终效果如下：

8.框大小

CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

默认情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度

height(高) + padding(内边距) + border(边框) = 元素实际高度

这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。

以上两个 <div> 元素虽然宽度与高度设置一样，但真实展示的大小不一致，因为 div2 指定了内边距:

.div1 {width: 300px;height: 100px;border: 1px solid blue;
}

.div2 {width: 300px;height: 100px;padding: 50px;border: 1px solid red;
}

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:

.div1 {width: 300px;height: 100px;border: 1px solid blue;box-sizing: border-box;
}

.div2 {width: 300px;height: 100px;padding: 50px;border: 1px solid red;box-sizing: border-box;
}

效果如下：

从结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。所有元素使用 box-sizing 是比较推荐的：

* {box-sizing: border-box;
}