由于CSS5标准还未完全订下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家在各自标准前加了一个前缀，
如：-moz- 主要是firefox火狐
-webikt-主要是chrome谷歌,
-o-主要是用于苹果机上的浏览器
一. box-shadow(阴影效果)
使用:
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
支持:
FF3.5, Safari 4, Chrome 3
二. border-colors(为边框设置多种颜色)
border: 10px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
说明:
颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555;
FF3◆
三. boder-image(图片边框)
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果;
(2). 边框图片效果(目前仅实现了两种):
repeat --- 边框图片会平铺, 类似于背景重复;
stretch --- 边框图片会以拉伸的方式来铺满整个边框;
(3). 必须将元素的边框厚度设置为非0非auto值.
FF 3.5, Safari 4, Chrome 3
四. text-shadow(文本阴影)
text-shadow: [] || [];
(1) 和是可选的, 当未指定时, 将使用文本颜色; 当未指定时, 半径值为0;
(2) shadow可以是逗号分隔的列表, 如:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) 阴影效果会按照shadow list中指定的顺序应用到元素上;
(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身;
(5) 阴影可能会跑到容器的边界大陵之外, 但不帆伍会影响容器的大小.
FF 3.5, Opera 10, Safari 4, Chrome 3
五. text-overflow(文本截断)
text-overflow: inherit | ellipsis | clip ;
-o-text-overflow: inherit | ellipsis | clip;
(1) 还有一个属性ellipsis-word, 但各浏览器均不支持.
IE6◆, Safari4, Chrome3, Opera10
六. word-wrap(自动换行)
word-wrap: normal | break-word;
IE6◆, FF 3.5, Safari 4, Chrome 3
七. border-radius(圆角边框)
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
FF 3◆, Safari 4, Chrome 3
八. opacity(不透明度)
opacity: 0.5;
filter: alpha(opacity=50); /* for IE6, 7 */
-ms-filter(opacity=50); /* for IE8 */
all
九. box-sizing(控制盒模型的组成模式)
box-sizing: content-box | border-box; // for opera
-moz-box-sizing: content-box | border-box;
-webkit-box-sizing: content-box | border-box;
1. content-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content ◆ padding ◆ border;
2. border-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度
也不会变).
FF3◆, Opera 10, Safari 4, Chrome 3
一、 h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览余键器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。 胡笑
- h5新增的标签：
video ： 表示一段视频并提供播放的用户界面
audio ： 表示音频
canvas： 表示位图区域
source： 为video和audio提供数据源
track ： 为video和audio指定字母
svg： 定义矢量图
code： 代码段
figure ： 和文档有关的图例
figcaption ： 图例的说明
time： 日期和时间值
mark： 高亮的引用文字
datalist ： 提供给其他控件的预定义选项
keyge： 秘钥对生成器控件
output ： 计算值
rogress ： 进度条
menu：菜单
embed： 嵌入的外部资源
menu： 菜单
二、 css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面。
新增属性：选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
文本效果（常用）
text-shadow：设置文字阴影
word-wrap：强制换行
word-break
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform：向元素应用2/3D转换
transition：过渡
动画
@keyframes规则：
animation、animation-name、animation-duration等
用户界面（常用）
box-sizing、resize
css3新增伪类
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个裤毁含识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
：enabled
：disabled
：checked
：not
h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。
- h5新增的标签
新增元素
说明
video表示一段视频并提供播放的用户界面
audio表示音频
canvas表示位图区域
source为video和audio提供数据源
track为video和audio指定字母
svg定义矢量图
code代码段
figure和文档有关的图例
figcaption图例的说明
main
time日期和时间值
mark高亮的引用文字
datalist提供给其他控件的预定义选项 镇知
keygen秘钥对生成器控件
output计算值
progress进度条
menu菜单
embed嵌入的外部资源
template
section
nav
aside
article
footer
header
- css3
css3被划分为模块，最重要的几个模御宽消块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面选择器
word-wrap：强巧碰制换行
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
加前景色：Alt◆backspace
加背景色：ctrl◆backspace
一耐谨、首先HTML布局：
消衫
css设置前景色透明
我是一段文字
二、没有加CSS的样式的效果显示：
三、加CSS样式的HTML：
.box {
width: 700px;
height: 350px;
margin: 0 auto;
color: white;
background-color: orange;
/*color: orange; 这个方式从视觉上是透明了的，原理就是把文字颜色设置成与背景颜色一样 有局限性 双击看得到文字 */
color: transparent; /*根上面方法一样 双击看得到文字 比上面好 推荐*/
}
四、加了CSS样式的效果图：
以上就是土嘎嘎小编大虾米为大家整理的css3新增背景属性相关主题介绍,如果您觉得小编更新的文章对您有所帮助，不要忘记讲本站分享给您身边的朋友哦！！