css文字阴影和盒子阴影

css文字阴影和盒子阴影

  1. 文字阴影:text-shadow(4个参数:水平阴影位置,垂直阴影位置,阴影模糊距离,阴影颜色)。
    css代码:
	h1{
	  font:bold 80px "微软雅黑";
	  text-shadow:10px 10px 10px red;
	}

HTML代码:

<h1>文字阴影</h1>

页面效果:
在这里插入图片描述
注意:text-shadow的参数颜色可以写在前面也可以写在后面,但是不能写在中间,否则没有效果。

	h1{
	  font:bold 80px "微软雅黑";
	  text-shadow:10px 10px red 10px;
	}

页面效果:
在这里插入图片描述
text-shadow还支持样式叠加:

	h1{
	  font:bold 80px "微软雅黑";
	  text-shadow:10px 10px 10px red,20px 20px 20px blue,30px 30px 30px green,40px 40px 40px yellow
	}

页面效果:
在这里插入图片描述
注意:阴影的位置可以为负值,但是阴影的模糊距离不能为负值。
2. 盒子阴影:box-shadow(6个参数:水平阴影位置,垂直阴影位置,阴影模糊距离,阴影的尺寸,阴影颜色,内部阴影/外部阴影(默认))。
css代码:

    div{
	  width:200px;
	  height:200px;
	  background:red;
	  box-shadow:10px 10px 10px blue
	}

HTML代码:

   <div></div>

页面效果:
在这里插入图片描述
现在的效果和text-shadow的效果一样,我们来设置一下阴影的尺寸:

    div{
	  width:200px;
	  height:200px;
	  background:red;
	  box-shadow:10px 10px 10px 10px blue
	}

页面效果:
在这里插入图片描述
阴影放大了,看看能不能设置负值:

    div{
	  width:200px;
	  height:200px;
	  background:red;
	  box-shadow:10px 10px 10px -10px blue
	}

页面效果:
在这里插入图片描述
box-shadow的inset可以设置内部阴影(默认是outset(外部阴影)):

    div{
	  width:200px;
	  height:200px;
	  background:red;
	  box-shadow:inset 10px 10px 10px gray
	}

页面效果:
在这里插入图片描述
box-shadow也可以实现样式叠加:

    div{
	  width:200px;
	  height:200px;
	  background:red;
	  box-shadow:10px 10px 10px red,20px 20px 20px blue,30px 30px 30px green,40px 40px 40px yellow
	}

页面效果:
在这里插入图片描述
注意:在box-shadow中,只有阴影的位置,阴影尺寸大小可以为负值,模糊距离不能为负值,控制数值的类型的参数尽量写在一起,否则样式不会生效。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值