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
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值