CSS3 之 圆角 & 阴影

圆角

圆角是 CSS3 的新特性

小例子

圆角是高度的一半

<style type="text/css">
.a {
    width: 100px;
    height: 20px;
    text-align: center;
    background-color: tomato;
    border-radius: 10px;
}
</style>
<div class="a">大数据男孩</div>

画一个圆

<style type="text/css">
    .b {
        width: 50px;
        height: 50px;
        text-align: center;
        background-color: tomato;
        border-radius: 50%;
    }
</style>
<div class="b"></div>

阴影

阴影是 CSS3 的新特性

语法

顺序不能颠倒

box-shadow: 水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内外阴影

小例子

<style type="text/css">
    .b {
        width: 50px;
        height: 50px;
        text-align: center;
        background-color: tomato;
        box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    }
</style>
<div class="b"></div>