<!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>