1 CSS3 边框（引用http://www.w3school.com.cn/css3/css3_border.asp）
通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框
border-radius：创建圆角边框 box-shadow 添加阴影 border-image 使用图片来绘制边框
div
{
border-radius:25px;
}
div
{
box-shadow: 10px 10px 5px #888888;
}
div
{
border-image:url(border.png) 30 30 round;
}
<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>
2 CSS3 背景
属性 描述 CSS
background-clip 规定背景的绘制区域。
background-origin 规定背景图片的定位区域。(放置于 content-box、padding-box 或 border-box)
background-size 规定背景图片的尺寸。
3 CSS3 文本效果 CSS3 包含多个新的文本特性。
3.1 text-shadow 文本应用阴影
选项依次是水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
h1 { text-shadow: 5px 5px 5px #FF0000; }
3.2 word-wrap 属性允许您允许文本强制文本进行换行 即使这意味着会对单词进行拆分：
<!DOCTYPE html>
<html>
<head>
<style>
p.test
{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
3.4 @font-face 规则(引用 http://www.w3school.com.cn/css3/css3_font.asp)
定义指定的字体
4 CSS3 转换 ，可以使用 2D 或 3D 转换来转换您的元素。（引用http://www.w3school.com.cn/css3/css3_2dtransform.asp）
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
4.1 translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
4.2 rotate()：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
div
{
transform: rotate(30deg); //旋转30度 允许负值，元素将逆时针旋转。
}
4.3 scale()
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
div
{
transform: scale(2,4);
}
4.4 skew()
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>
5 CSS3 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容： 规定您希望把效果添加到哪个 CSS 属性上 规定效果的时长
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s; //应用于g高 宽度属性的过渡效果，时长为 2 秒
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);//旋转180度
}
</style>
</head>
<body>
<div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
6 CSS3 多列 (引用http://www.w3school.com.cn/css3/css3_multiple_columns.asp)
通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
column-count ：column-count 属性规定元素应该被分隔的列数：
column-gap：column-gap 属性规定列之间的间隔
column-rule：column-rule 属性设置列之间的宽度、样式和颜色规则。
分享到：
相关推荐
CSS3新增属性 1、border-radius：圆角边框 border-radius:10px 20px 30px 40px; /*圆：值为半径*/ border-radius:10px 20px 30px 40px/20px 30px 40px 50px; /*椭圆*/ 2、box-sizing：改变盒模型的模式 box-sizing...
CSS3是CSS（层叠样式表）的第三个主要版本，它引入了许多新的属性和功能，显著增强...压缩包文档描述的是一些CSS3新增的关键属性及其简要说明。包含布局与对齐、视觉效果与装饰、字体与文本、变形与动画、响应式设计。
CSS3新增属性 box-shadow(阴影效果) border-colors(为边框设置多种颜色) boder-image(图片边框) text-shadow(文本阴影) text-overflow(文本截断) border-radius(圆角边框) opacity(不透明度) box-sizing...
正如其名，calc是css3中新增的计算属性，让很多属性增加了一个表达式的说法； calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size、width和...
《Web 前端》第 10 章 CSS3 新增属性详解 CSS3 作为 CSS 的进阶版，带来了许多新的变化和改进。其中，CSS3 新增了许多有用的属性，例如背景属性、字体文本属性、变形动画属性、弹性盒子等等。本节将详细介绍 CSS3 ...
#### CSS3 新增属性介绍 相较于 CSS2，CSS3 增加了许多新的属性，这些新属性极大地增强了网页的表现力和可定制性。 1. **圆角边框 (`border-radius`)**： - **作用**：`border-radius` 属性允许设置元素边框的...
html css css新增属性和选择器
在源代码中，你可以找到大量使用CSS3新增属性的例子，这对于想要探索小猪CMS系统内部运作机制以及提升前端界面设计能力的同学来说，是一个宝贵的资源。 首先，让我们来看看CSS3中的一些重要特性： 1. **选择器增强...
接下来，我们来深入理解一些与多重背景图像相关的 CSS3 新增属性： 1. **`background-origin`**：这个属性决定了背景图像的位置相对于哪里。默认值为 `padding-box`，意味着背景图像的位置是相对于内边距框。其他...
CSS3阴影属性是CSS3新增的一个重要特性，它极大地丰富了网页设计的视觉表现力，使得文本和元素的外观更加立体和生动。阴影属性主要包括两个方面：`text-shadow`和`box-shadow`。 1. `text-shadow`属性： `text-...
9. CSS3 新增属性 CSS3 新增了多种属性，例如 `box-shadow`、`text-shadow`、`border-radius` 和 `rgba`。这些属性提供了更多的样式选择和控制。 10. 背景颜色 背景颜色可以使用多种方式来实现，例如使用 `bg-...
但是对于网站前端开发人员来说，这个幻灯片绝对值得一看，它主要讲解了一些CSS3的新属性，包括伪类/伪元素和一些新增的属性，比如变形(transform)，阴影等。实例和配图很棒，相信对CSS3还有些疑惑的同学，看了这个...
CSS3新增的背景属性为开发者提供了更强大的背景图片控制功能。在CSS2.1中，我们能够通过五个属性来控制元素背景：background-color、background-image、background-repeat、background-attachment和background-...
CSS3引入了`border-radius`属性，允许开发者直接通过CSS定义元素的四个角的圆角半径，使得创建圆滑边缘的元素变得简单。例如，`border-radius: 20px;`将为所有角落设置20像素的圆角。对于单独控制每个角的圆角，可以...
- **filter**：CSS3新增属性，用于添加多种视觉效果，如模糊、阴影等。 - **alpha**：调整透明度。 - **blur**：添加模糊效果。 - **brightness**：调整亮度。 - **contrast**：调整对比度。 - **grayscale**：...
以下是对这些新增属性选择器的详细介绍： 1. **属性选择器（Attribute Selectors）** 属性选择器基于HTML或XML元素的属性来选取元素。它主要有三种形式： - `[attr]`：匹配具有指定属性`attr`的所有元素。 - `...
压缩包中的"CSS3.0（飘零雾雨版）.chm"很可能是针对CSS3的一个详细教程或参考文档，涵盖了CSS3的所有新特性、语法和实例。而"HTML5（W3CSchool版）.chm"则可能包含W3School提供的HTML5学习资料，包括基本概念、元素...
5. **文档提示**：集成的文档提示可能包含对CSS3属性的简短描述，方便开发者了解每个属性的作用和用法。 **三、安装过程** 要安装"CSS3 IS 2.1.1.msi"这个压缩包，通常只需双击该文件，然后按照安装向导的步骤操作...