CSS3样式

1 文本

1.1 text-shadow

设置⽂本的阴影

参数：⽔平位移 垂直位移 模糊程度 阴影颜⾊

text-shadow: 20px 27px 22px pink;

p { 
    font: bolder 50px "Microsoft Yahei"; 
    text-align: center; 
    margin-top: 10px; 
    color: teal; 
    text-shadow: 10px 10px 5px red; 
} 

text-shadow 可以设置多个阴影，每个阴影之间使⽤逗号隔开。

1.2 凹凸文字效果

实现凹凸⽂字效果的⽅式⽐较简单，给左上⻆放黑色的阴影，右下⻆放白色的阴影，就达到了凹下去的效果；凸的效果刚好相反。

<style>
    * {
        margin: 0;
        padding: 0
    }
​
    p {
        font: bolder 50px/1.5 "Microsoft Yahei";
        text-align: center;
        color: #666666;
    }
​
    .box {
        background-color: #666666;
    }
​
    .tu {
        text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    }
​
    .ao {
        text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
    }
</style>
<div class="box">
    <p class="ao">我是凹</p>
    <p class="tu">我是凸</p>
</div>

1.3 火焰字

<style>
    .fire {
        font-size: 60px;
        color: red;
        text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
    }
</style>
<div class="fire">火焰字</div>

2 边框

边框的属性很多，其中边框圆⻆和边框阴影这两个属性，应⽤⼗分⼴泛，兼容性也相对较好

2.1 border-radius

设置边框圆角

取值：

• px

• 百分比

​
<style>
    .box {
        border-radius: 60px;
    }
</style>

以60px为半径的圆的弧度为圆⻆

以上是最简洁的写法：四个⻆的半径都相同时，这个写法是可以被拆分的。

边框的每个圆⻆，本质上是⼀个圆，圆有⽔平半径和垂直半径：

• 如果二者相等，就是圆

• 如果二者不等， 就是椭圆

拆分写法：

• top/bottom + left/right

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background: #ff0000;
        /* 水平半径 垂直半径 不等 */
        border-top-left-radius: 60px 120px;
    }
​
    .box2 {
        width: 100px;
        height