css基础内容 -- 阴影

本文介绍了CSS中创建文本和元素阴影的方法。对于文本阴影,使用text-shadow属性可以添加多个逗号分隔的阴影,甚至创建无阴影的纯边框效果。而对于元素阴影,box-shadow属性则用于制作类似纸质卡片的立体效果。推荐学习资源:CSS Box Shadow on w3school.com.cn。
摘要由CSDN通过智能技术生成

1.文字阴影:text-shadow

h1 {
  text-shadow: 水平阴影(px) 垂直阴影(px) 模糊效果(px) 颜色;
}

       多个阴影:如需在文本中添加多个阴影,您可以添加以逗号分隔的阴影列表

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

 

还可以使用 text-shadow 属性在文本周围创建纯边框(无阴影)

h1 {
  color: pink;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

 

 2.元素阴影:box-shadow

div {
  box-shadow: 水平阴影(px) 垂直阴影(px) 模糊效果(px) 颜色;
}

可以使用 box-shadow 属性创建纸质卡片效果

...
<style>
div.card {
  wid
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值