CSS3设计功能5个可以利用

层叠样式表（CSS）是网页设计的语言，和下一代的CSS设计性能都迫不及待地想被释放。
你想开始使用他们，但不知道从哪里开始呢？
虽然许多新的特性，没有“官方”，一些浏览器已经实现了许多功能的CSS 3级规格。
问题是，许多浏览器特别是Internet Explorer没有。

要使用这些新的CSS3的特点是把他们当作设计改进。
一个设计增强（我讨论我的新书演讲风格：网页设计师的CSS的基础）任何繁荣您添加到您的网站设计，增加视觉吸引力，而不降低其可用性如果样式不呈现。

这可以是一个棘手的电话，有一个一线之间增强而不是减少可用性：
•设计增强的例子：使用边界半径圆盒子的角落，创造一个更吸引人的设计。然而，如果角不呈现，网站还在使用。
•设计实例减少可用性：使用RGBA颜色值在背景重叠的元素，都需要清晰可见，期待上元素是半透明的。这将使它不可能为一些人使用该网站，从而减少页面的可用性。
让我们来看看5种不同的CSS3属性，你可以开始玩吧，只要你永远记住，他们只应被用来提高你的设计，而不依赖于网站的可用性。
这是原来的设计，在使用任何CSS3设计改进

1。透明的颜色
支持的浏览器：苹果Safari 4，Firefox 3.0.5，谷歌浏览器1
RGBA允许你控制一个特定的颜色填充不透明度，无论是文字、背景、边框、阴影颜色。
设置颜色的透明度要求您指定的颜色值用RGB表示十六进制值是不允许一个额外的值从0（透明）到1（不透明）。
<跨度风格=“颜色：# 008000；”> RGBA（0-255,0-255,0-255,0-1）  class=“spacer_”/>
你也应该有一个简单的RGB颜色值，或六作为其他浏览器使用回退：
<跨度风格=“颜色：# 008000；“>。爆破{ 
 
 < /跨度> <跨度风格=“颜色：# 008000；“>颜色：RGB（235235235）；
 
 < /跨度> <跨度风格=“颜色：# 008000；“>颜色：RGBA（255255255,0.75）；
 
 < /跨度> <跨度风格=“颜色：# 008000；”>背景颜色：RGB（153153153）；
 
 < /跨度> <跨度风格=“颜色：# 008000；”>背景颜色：RGBA（0,0,0,0.5）；
 
 < /跨度> <跨度风格=“颜色：# 008000；”>边框颜色：RGB（235235235）；
 
 < /跨度> <跨度风格=“颜色：# 008000；”>边框颜色：RGBA（255255255,0.65）；
 
 < /跨度> <跨度风格=“
好消息是，还有一个后备方案至少在Internet Explorer的背景颜色，支持透明的颜色使用过滤器和条件格式：

2。圆角
支持的浏览器：苹果Safari 3，Firefox 1，谷歌浏览器1
边界半径套盒子的每一角落的曲率，好像有一个假想的圆的角落与一个特定的半径（R）：
<跨度风格=“颜色：# 008000；”>边界半径R；
虽然边界半径将是未来CSS3规范的一部分，无论是Mozilla（Firefox）和Webkit（Safari和Chrome）推出了自己的版本必须包含最大的跨浏览器兼容性：
<跨度风格=“颜色：# 008000；”>的WebKit的边界半径：10px；
 
  <跨度风格=“颜色：# 008000；”> -moz边界半径：10px；
 
  <跨度风格=“颜色：# 008000；”>边界半径：10px；
你也可以设置半径为角单独：
CSS3    Mozilla    WebKit
边境—右上角半径    -moz边境—半径右上    WebKit的边界—右上角半径
边境—右下角的半径    -moz边境—半径下    WebKit的边界—右下角的半径
边境—左下角的半径    -moz边境—bottomleft半径    WebKit的边界—左下角的半径
边境—左上角的半径    -moz边境—半径上    WebKit的边界—左上角的半径
边境—半径    -moz边境—半径    WebKit的边界—半径
 
 
3。文字阴影
支持的浏览器：苹果Safari 3，Firefox 3.0.5，谷歌浏览器1
在任何文本添加阴影，控制左右或上下偏移，以及颜色：
<跨度风格=“颜色：# 008000；”>文本阴影：X Y模糊颜色；
你可以文字阴影透明色来控制阴影的黑暗结合：
<跨度风格=“颜色：# 008000；”>文本阴影：- 2px 2px 10px RGBA（0,0,0，。5）；< /跨度>
您还可以包括多个文本阴影只是重复值用逗号隔开：
<跨度风格=“颜色：# 008000；”>文本阴影：< /跨度> <跨度风格=“颜色：# 008000；”> 0 0 10px RGBA（0255,0，。5），- 10px 5px 4px的RGBA（0,0255，45），< > <跨跨越式=“颜色008000：#；”> 
 
 15px - 4PX 3px RGBA（255,0,0，。75）；< /跨度>

4。阴影框

支持的浏览器：苹果Safari 4，Firefox 3，谷歌浏览器1

任何框添加投影屏幕上遵循相同的格式，添加一个文本阴影：

<跨度风格=“颜色：# 008000；”>盒阴影：X Y模糊颜色；

就像文字阴影，Mozilla和WebKit在最终的CSS标准提前实施自己的词汇：

<跨度风格=“颜色：# 008000；”> - WebKit盒阴影：0 0像素RGB（0,0,0）；

 < /跨度> <跨度风格=“颜色：# 008000；”> -moz盒阴影：0 0像素RGB（0,0,0）；

 < /跨度> <跨度风格=“颜色：# 008000；”>盒阴影：0 0像素RGB（0,0,0）；

你可以通过包括多个值用空格分隔添加多个阴影：

-webkit-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45), 

15px -20px 20px rgba(255,0,0,.75);

-moz-box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),

15px -20px 20px rgba(255,0,0,.75);

box-shadow: 0 0 20px rgb(0,255,0), -10px 5px 4px rgba(0,0,255,.45),

15px -20px 20px rgba(255,0,0,.75);

5。多重背景

支持的浏览器：苹果Safari 1.3，谷歌浏览器1

包括在一个单一的元素多背景图片只需要额外的设置值被添加到背景属性，用逗号隔开。你应该有一个背景图像作为其他浏览器的备份：

<跨度风格=“颜色：# 008000；”>背景图像：URL（astro-127531。PNG）；

 < /跨度> <跨度风格=“颜色：# 008000；”>背景图像：URL（astro-127531。PNG），URL（hubble-112993。PNG）；

 < /跨度> <跨度风格=“颜色：# 008000；”>背景重复：不重复；

 < /跨度> <跨度风格=“颜色：# 008000；”>背景位置：左下；

 < /跨度> <跨度风格=“颜色：# 008000；”>背景位置：左下

特别奖金

旋转的东西！

支持的浏览器：苹果Safari 4，Firefox 3.5，铬1

虽然不是一个部分的CSS3规范然而，WebKit已实现其自身的变换特性，Mozilla是继服。变换可以包括不同的价值类型，但其中最有趣和有用的设计增强-旋转：

<跨度风格=“颜色：# 008000；”>的WebKit的变换：旋转（- 15）；

 < /跨度> <跨度风格=“颜色：# 008000；”> -moz变换：旋转（- 15）；