介绍 10 个 CSS3 属性
介绍 10 个 CSS3 属性

    border-radius

        border-radius

        border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级 别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。 border-radius是一大堆CSS3属性中最受欢迎的一种，border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将 在不同的浏览器之间以不同的方式显示时，CSS圆角，一个很初级的知识，将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是，当这种方法出现在桌面浏览器上时，他们却又不这么认为。

        -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;

        注意：请在Safari 5 和 IE9浏览器中执行”border-radius”语法。
        圆
        许多读者也许不会意识到我们可以用这个属性来做一个圆。

        -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;


        圆

        如果想再添加点效果，我们可以利用Flexible Box Model（详情在8中）来使得文字在垂直在水平方向都居中。这需要加点代码，但这仅仅是对不同浏览器的补偿。

        display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; /* the default, so not really necessary here */ -webkit-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; -webkit-box-pack: center; -webkit-box-align: center; box-pack: center; box-align: center;

    box-shadow

        box-shadow

        接下来是非常普遍的box-shadow，可以使你的元素立即美化，只是记得不要把值设得太离谱。

        -webkit-box-shadow: 1px 1px 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; box-shadow: 1px 1px 3px #292929;

        box-shadow的四个参数
            x-offset x轴偏移
            y-offset y轴偏移
            blur 模糊值
            color of shadow 阴影颜色

        现在，许多人不知道可以一次运用多个box-shadows，这样做会产生一些有趣的效果。在下图中，我使用蓝色和绿色阴影来放大一下效果。

        box-shadow

        -webkit-box-shadow: 1px 1px 3px green, -1px -1px blue; -moz-box-shadow: 1px 1px 3px green,-1px -1px blue; box-shadow: 1px 1px 3px green, -1px -1px blue;

        Clever Shadows

        <div class="box"> <img src="tuts.jpg" alt="Tuts" /> </div>

        The CSS

        .box:after { content: ''; position: absolute;   z-index: -1; /* hide shadow behind image */   /* The Shadow */ -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);   width: 70%; left: 15%; /* one half of the remaining 30% (see width above) */   height: 100px; bottom: 0; }


    text-shadow

        text-shadow

        text-shadow是我们可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须应用于文本，并它们有相同的四个参数：
            x-offset 水平位移
            y-offest 垂直位移
          &nbs