设置阴影box-shadow与text-shadow

box-shadow属性可以设置一个或多个下拉阴影的框
语法

box-shadow: h-shadow v-shadow blur spread color inset;

注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

说明
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset可选。从外层的阴影(开始时)改变阴影内侧阴影

react中使用 :

style={{boxShadow: "2px 2px 3px #888888"}}

效果:
在这里插入图片描述

text-shadow 属性应用于阴影文本
语法

text-shadow: h-shadow v-shadow blur color;

注意: text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。参阅 CSS 颜色值。

react中使用 :

style={{textShadow: "2px 2px #FF0000"}}

效果:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3box-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关键字,创建了不同类型的阴影效果。 总结来说,CSS3box-shadow属性可以用于创建各种阴影效果,包括内阴影和多重阴影。可以通过调整偏移量、模糊半径、扩展半径和颜色来实现不同的效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值