站建设CSS3中引入的新特性和功能。这些新特性极大地增加了web程序的表现能力，同时简化了web UI的编程模型。下面成都网站建设蜀风科技将详细介绍这些CSS3的新增特性。

1、强大的选择器

网站建设CSS3的选择器在CSS2.1的基础上进行了增强，它允许设计师在标签中指定特定的HTML元素而不必使用多余的类、ID或者JavaScript脚本。

如果希望设计出简洁、轻量级的网页标签，希望结构与表现更好地分离，高级选择器是非常有用的。它可以大大简化我们的工作，提供编写代码效率，并让我们很方便地制作出可维护性的页面。

2、半透明度效果的实现

网站建设中RGBA不仅可以设定色彩，还能设定元素的透明度。无论是文本、背景还是边框均可使用该属性。该属性的语法在其支持的浏览器中形同。

3、多栏布局

网站建设新的CSS3选择器可以让用户不必使用多个DIV标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。

4、多背景图

CSS3允许背景属性设置多个属性值，这样就可以在一个元素上添加多层背景图片。

5、块阴影和文字阴影

尽管box-shadow和text-shadow再CSS2中就已经存在，但是它们未被广泛应用，它们将在CSS3中被广泛采用。块阴影和文字阴影可以不用图片就能对HTML元素添加阴影，增加显示的立体感增强设计的细节。块阴影使用box-shadow属性，文字阴影使用text-shadow属性，该属性目前在Safari和Chorme中可用。

6、圆角

网站建设CSS3新功能中最常用的一项就是圆角效果，Border-radius无须背景图片就能给HTML元素添加圆角。不同于添加JavaScript或多余的HTML标签，仅仅需要添加一些CSS属性并从好的方面考虑。这个方案是清晰的和比较有效的，而且可以让你免于花费几小时来寻找精巧的浏览器方案和基于JavaScript圆角。

7、边框图片

网站建设中Border-image属性允许在元素的边框上设置图片，这使得原本单调的边框样式变得很丰富。让你从通常的solid、dotted和其他边框样式中解放出来。改属性给设计师一个更好的工具，用它可以方便地定义设计元素的边框样式，比background-imag属性或枯燥的默认边框样式更好用。也可以明确的定义一个边框可以被如何缩放或平铺。

8、形变效果

网站建设通常使用CSS和HTML我们是不可能使用HTML元素旋转或倾斜一定角度的。为了使元素看起来更具有立体感，我们不得不把这种效果做成一个图片，这样就限制了很多动态的使用应用场景。Transform数学的引入使我们以前通常要借助SVG等矢量绘图手段才能实现的功能，只需要一个简单的CSS属性就能实现。

9、媒体查询

媒体查询可以让你为不同设备基于它们的能力定义不同的样式。如在可视区域小于400像素的时候，想让网站侧栏显示在主内容的下边，这样它就不应该浮动并显示在右侧了。

10、CSS3线性渐变

渐变色是网页设计中很常用的一项元素，它可以增强网页元素的立体感，同事使单一颜色的页面看起来不是那么突兀。过去为了实现渐变色，通常需要先制作一个渐变的图片，将它切割成很细的一小片，然后使用背景重复是整个HTML元素拥有渐变的背景色。这样做有两个弊端：为了使用图片背景，很多时候使得本身简单的HTML结果变得复杂；另外，受制于背景图片的长度火宽度，HTML元素不能灵活的冬天调整大小。CSS3中Webkit和Mozilla对渐变都有强大的支持。

成都蜀风科技打造与企业品牌相匹配的网站及微信开发，对每一个网站建设和微信开发项目，都以策略先行，再将创意与技术完美结合。 为企业打造出与企业品牌气质相匹配的网络品牌形象。 我们始终保持行业领先开发水平，不断掌握领先的网络技术。

• 理
• 1. 先创建一个div
• 2. 然后给div设定边框。
• 3. 给div的四个边框都设置不同的颜色
• 4. 把宽度和高度都变成0
• 5. 其余角为透明
• 6. 兼容IE6浏览器
• 造成这样的原因是：
• 最简单的解决办法：(后面添加)
• 其他的解决办法：
• 7. 解决内联元素的三角显示问题
• 为什么会有这个问题
• 解决办法
• 1. 去掉固定的内容高度
• 2. 将内联元素转化为块级元素或者行内块元素
• 3. 将元素脱标（如果涉及特殊的布局可以直接使用）
• 最终代码
• 扩展
• 有角度的三角
• 有一个角是直角的三角
• 箭头
• 对话框
• 兼容IE8的小圆角矩形
• 利用css3旋转来制作三角形

简介

三角的做法有好几种：

• 图片、精灵图（网易）
• 字体图标（京东）
• 纯代码写（亚马逊）

这里主要介绍的纯代码写的。

优点

1. 代码写的三角，不管大小是多少，是不失真的。
2. 代码运行比图片更快。
3. 如果项目中没有引用字体图标，代码写是比较可靠的。

原理

原理就是使用css的盒模型中的border属性

使用border属性就可以实现一个兼容性很好的三角图形效果，其底层受到border-style的inseet/outset影响，边框3D效果在互联网早期还是很流行的，。

1. 先创建一个div

<div></div>

2. 然后给div设定边框。

div{
 width:200px;
 height:100px;
 border:10px solid red; 
}

可以看到效果：

3. 给div的四个边框都设置不同的颜色

div{
 width:200px;
 height:100px;
 border-left:10px solid red;
 border-top:10px solid green; 
 border-right:10px solid blue; 
 border-bottom:10px solid yellow; 
}

可以看到以下效果：

可以看到两个border交叉的地方，有斜边存在。

4. 把宽度和高度都变成0

div{
 width:0px;
 height:0px;
 border-left:10px solid red;
 border-top:10px solid green; 
 border-right:10px solid blue; 
 border-bottom:10px solid yellow; 
}
/*也可以这么写*/
div{
 width:0px; 
 height:0px;
 border:10px solid; 
 border-color:red green blue yellow;
}

可以看到以下效果：

这个时候就看得很明显了，出现了四个三角。那如果要出现一个，那么就将其他的三个弄成透明色就可以了。

这个就是三角形的由来。

5. 其余角为透明

这里的设置也遵循 上右下左 的顺序，把不需要的角弄成透明色。

div{
 width:0px; 
 height:0px;
 border-width:10px; 
 border-color:#f00 transparent transparent transparent;
 border-style:solid;
}
/*也可以再进行合并*/
div{
 width:0px; 
 height:0px;
 border:10px solid; 
 border-color:#f00 transparent transparent transparent;
}

这样一个三角就完成了。 那么问题来了，那就是兼容问题，IE6的兼容问题，如果不要求兼容IE6可以忽略下一步。

6. 兼容IE6浏览器

同样的一个三角，在IE6的显示是什么呢？

造成这样的原因是：

• IE6不支持border的transparent
• IE6的高度最小为19px，不支持高度为0

在IE6下面，如果想把元素例如div设置成19像素以下的高度就设置不了了。这是因为IE6浏览器里面有个默认的高度，IE6下这个问题是因为默认的行高造成的。

最简单的解决办法：(后面添加)

div{
 /*不支持transparent*/
 border-style:solid dashed dashed dashed;
 /*高度最小不为0*/
 overflow:hidden;
}

1. 查了查网上的，如果是IE6不支持transparent, 可以这么做：

div{
 border:solid 1px transparent; 
 _border-color:tomato; 
 _filter:chroma(color=tomato); 
}

所以我觉得用在这里也可以， BUT没有亲测过，如果哪位小可爱测过可以请告知我^ ^。

div{
 width:0px;
 height:0px;
 margin:100px auto;
 border-width:10px;
 border-style:solid;
 border-color:#f00 transparent transparent transparent;
 _border-color:#f00 tomato tomato tomato; 
 _filter:chroma(color=tomato);
}

1. 如果是解决IE6的高度问题(也可以前面加下划线，表示兼容的IE6)

div{
 height:0;
 font-size:0;
 line-height:0;
 overflow:hidden;
}

7. 解决内联元素的三角显示问题

为什么会有这个问题

因为我们刚才用 <div> 去制作三角，当然我们经常会使用 <em><i> 或者伪元素去做一些小图标。那么在显示上面，可能会有问题。 下面的代码：

<style>
em{
	width: 0;
	height: 0;
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
}
</style>
<em></em>

可以看到页面是这个样子的:

为什么是这个样子的，那么我们再看的仔细一点。 它实际是这个样子的。

造成这样的原因

1. 是因为行内元素自己有固定的高度，不能设置宽高为0，所以上面下面都是50px没有问题，但是中间撑开了距离，也就有了梯形的效果。
2. 而且如果上面没有块元素的时候，是从内联元素的内容开始算起的，所以上面的border就会到浏览器可视区域的上面。

解决办法

这个有很多的办法：

1. 去掉固定的内容高度

使用font-size:0;可以去掉内容的固定高度。

em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	font-size: 0;
}

2. 将内联元素转化为块级元素或者行内块元素

em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	display: block; /*也可以是inline-block*/
}

3. 将元素脱标（如果涉及特殊的布局可以直接使用）

/*脱标*/
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	position: absolute;
	top:0;
	left:0;
}
/*or 浮动*/
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	float:left;
}

最终代码

下面就是兼容了IE6版本的三角代码。

div{
 width:0px; /*设置宽高为0*/
 height:0px;/*可不写*/
 border-width:10px; /*数值控制三角的大小，垂直的位置*/
 border-color:#f00 transparent transparent transparent;/*上右下左，transparent是透明的*/
 border-style:solid dashed dashed dashed;/*设置边框样式，dashed是兼容IE6写的*/
 overflow:hidden;/*兼容IE6最小高度不为0写的*/
}

改变border-width,三角变大，是不失真的。很清晰。

==三角制作完成 。==

扩展

有角度的三角

上面制作的都是45度的三角，三角可以通过border的高度宽度确定角度。

比如这样一个三角，只需要确定上下的和左右的宽度不一样即可。

div{
	width: 0px;
	height: 0px;
	margin: 100px auto;
	border-width:10px 30px;
	border-color:transparent transparent transparent red;
	border-style:solid;
}

有一个角是直角的三角

观察可以看到，是上面和右面的三角同时设置成一个颜色。就会出现直角的三角。

div{
	width: 0;
	border-width: 20px 10px;
	border-style: solid;
	border-color: red red transparent transparent;
}

箭头

其实原理也简单，就是两个三角重叠在一起。上面的三角就是背景的颜色

<style type="text/css">
.san {
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid; 
	position: relative;
	}
.si {
	border-width: 30px;
	border-color: transparent transparent transparent #fff;
	border-style: solid; 
	position: absolute;
	left: -50px;
	top: -30px;
}
</style>
<!--html结构-->
<div class="san">
	<div class="si"></div>
</div>

对话框

这个使用伪元素去做就很方便。