CSS3中几个新属性的总结1

标签：

2015-12-0319:04:09

1.CSS3的支持浏览器：chrome，safari，firefox，opera，IE10之后的版本。
2.在编写CSS3样式中，不同的浏览器的可能需要不用的前缀。。它表示该css属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性。

前缀 浏览器
-webkit chrome 和 safari
-moz firefox
-ms IE
-o opera
3.圆角的实现
　　1.border-radius:10px; 所有角都使用半径为10px的圆角。
　　2.border-radius:5px 4px 3px 2px;四个半径值半径分别是左上角，右上角，右下角 顺时针。
　　3.单位可以是：px，em，和百分比。
　　　　半圆的实现：
　　　　CSS3: #two { height:50px; width:100px; background:#9da; border-radius:50px 50px 0 0;margin:0 auto;}
　　　　html: <div class="two"></div> <!--高度为宽度的一半，只设置左上角和右上角的半径和元素的高度一致。大于也是可以的-->
　　　　实心圆的实现：
　　　　CSS3：#three { height:100px; width:100px; background:#269abc; border-radius:50px; margin:0 auto;}
　　　　HTML：<div class="three"></div> <!--高度和宽度相等，四角的半径和元素的高度的一半-->
4.box-shadow 是向盒子添加阴影效果。支持添加一个或者多个。
语法：X轴偏移量，y轴偏移量， [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
参数介绍：X轴偏移量：必需，水平阴影的位置，允许负值
　　y轴偏移量：必需，垂直阴影的位置，允许负值
　　阴影模糊半径：可选，模糊距离
　　阴影扩展半径：可选，阴影的尺寸
　　阴影的颜色:可选，阴影的颜色，省略默认为黑色
　　投影方式：可选。设置inset时为内部投影方式，如果省略为外阴影方式
　　注意:inset 可以写在参数的第一个或者最后一个，其他位置是无效的。
例子：
<style type="text/css">
* { margin:0; padding:0; border:none; list-style:none;}
#a { height:100px; width:100px; box-shadow:-1px -1px 6px #333; margin:0 auto; margin-top:100px;}
#b { height:100px; width:100px; box-shadow:1px 1px 6px #333 inset; margin:0 auto; margin-top:100px;}
#c { margin:0 auto;
margin-top:100px;
height:100px;
width:100px;
box-shadow:4px 2px 6px #f00,
-4px -2px 6px #000,
0 0 12px 5px #33cc00 inset;
}
</style>

<div id="a">为元素设置外阴影</div>
<div id="b">为元素设置内阴影</div>
<div id="c">添加多个阴影</div>

CSS3中几个新属性的总结1

标签：

原文地址：http://www.cnblogs.com/changxiaying/p/5017288.html