文字阴影(text-shadow)与盒子阴影(box-shadow)

文本阴影

text-shadow:水平阴影的距离 垂直阴影的距离 模糊度 颜色;

注意点:

  1. 参数至少2个,且是前2个。
  2. 水平和垂直阴影的距离可以给负数。
  3. 默认情况下,阴影的颜色是字体颜色。
  4. 多个阴影的时候,中间用逗号隔开。

盒子阴影

box-shadow:水平阴影的距离 垂直阴影的距离 模糊度 延伸半径 颜色 内阴影;

注意点:

  1. 参数至少2个,且是前2个。
  2. 水平和垂直阴影的距离可以给负数。
  3. 默认情况下,阴影的颜色是黑色。
  4. 多个阴影的时候,中间用逗号隔开。
  5. 内阴影  inset。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CSS3的box-shadow属性用于向元素添加阴影效果。可以通过指定x轴偏移量、y轴偏移量、模糊半径、扩展半径和颜色来定义阴影。可以使用逗号将多个阴影效果叠加在一起。 例如,在以下示例中,box-shadow属性被用于创建一个绿色的盒子阴影: ```html <style type="text/css"> div { width: 100px; height: 100px; margin: 50px; border: 10px dotted pink; display: inline-block; box-shadow: 0 0 10px 10px green; } </style> <body> <div></div> </body> ``` 在这个例子中,x轴偏移量和y轴偏移量都为0,模糊半径为10px,扩展半径为10px,颜色为绿色。 box-shadow属性还可以用于创建更复杂的阴影效果,可以同时添加多个阴影效果,并使用inset关键字指定内阴影。 例如,在以下示例中,box-shadow属性被用于创建不同类型的阴影效果: ```html <style type="text/css"> div { width: 100px; height: 100px; margin: 50px; border: 10px dotted pink; display: inline-block; } .shadow0 { box-shadow: 0 0; } .shadow1 { box-shadow: 1px 1px; } .shadow10 { box-shadow: 10px 10px; } .inset-shadow0 { box-shadow: 0 0 inset; } .inset-shadow1 { box-shadow: 1px 1px inset; } .inset-shadow10 { box-shadow: 10px 10px inset; } </style> <body> <div class="shadow0"></div> <div class="shadow1"></div> <div class="shadow10"></div> <div class="inset-shadow0"></div> <div class="inset-shadow1"></div> <div class="inset-shadow10"></div> </body> ``` 在这个例子中,使用不同的偏移量和inset关键字,创建了不同类型的阴影效果。 总结来说,CSS3的box-shadow属性可以用于创建各种阴影效果,包括内阴影和多重阴影。可以通过调整偏移量、模糊半径、扩展半径和颜色来实现不同的效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大聪明码农徐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值