<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css3第一天 练习</title>
<style>
.nb{ border: 1px solid #ccc; padding: 10px 0; }
.rgba{ height: 100px; background-color: rgba(180,100,100,0.5); }
.shadow{ text-shadow: 2px 2px 2px #000; }
</style>
</head>
<body>
<h3>颜色 新增了RGBA、HSLA模式</h3>
<section class="rgba" >
<pre class="nb">
/*现代浏览器*/
opacity: .5;
/*IE678*/
filter:alpha(opacity = 50);
</pre>
</section>
<h3>盒子模型</h3>
<section>
<pre class="nb">
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况： 1、box-sizing: border-box 计算方式为content = width – border - padding 2、box-sizing: content-box 计算方式为content = width
</pre>
</section>
<h3>文字阴影</h3>
<section>
<p class="shadow"> 语法： text-shadow：水平偏移 垂直偏移 羽化大小 颜色 </p>
<pre class="nb">
语法： text-shadow：水平偏移 垂直偏移 羽化大小 颜色
</pre>
</section>
</body>
</html>
