初学HTML5——CSS阴影

一.text-shadow为文本添加阴影效果

1.基本语法格式:

选择器{text-shadow:h-shadow  v-shadow  blur  color;}

2.属性介绍:

  • h-shadow:水平阴影
  • v-shadow:垂直阴影
  • blur:模糊半径
  • color:阴影颜色

3.示例如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        P{
            font-size: 25px;
            text-shadow:10px 10px 10px red;  /*设置文字阴影的垂直距离、水平距离、模糊半径、和颜色*/
        }
    </style>
</head>
<body>
<p>text-shadow属性可以为文字添加阴影哦!</p>
</body>
</html>

4.效果如下:

在这里插入图片描述

二.box-shadow为盒子添加阴影

1.基本语法格式:

对象选择器{
	box-shadow:投影方式||x轴偏移量||Y轴偏移量||阴影模糊半径||阴影扩展半径||阴影颜色
	}

2.参数解释:

  • 投影方式:该参数为一个可选值,默认的投影方式是外阴影,当设置阴影类型为“insert”,投影方式就是内投影
  • X轴偏移量:该参数为阴影水平偏移量。当为正值时,阴影在对象的右边,当为负值是,阴影在对象的左边
  • Y轴偏移量:该参数为阴影垂直偏移量。当为正值时,阴影在对象的底部,当为负值是,阴影在对象的顶部
  • 阴影模糊半径:该参数为一个可选值,其值只能为正数,如果为0是表示阴影不具有模糊效果。如果值越大,则阴影的边缘就越模糊
  • 阴影扩展半径:该参数为一个可选值,当为正值是,则整个阴影都延展扩大,当为负值时,则缩小
  • 阴影颜色:该参数为可选,如果不设定任何颜色,浏览器会取默认色,但是各个浏览器的默认色不一样,特别是webkit内核下的Safari和Chrome浏览器的默认色为无色,也就是透明的

3.示例如下:

<!DOCTYPE html>
<html>
<head>
<style> 
	div
	{
		width:300px;
		height:100px;
		background-color:#ff9900;
		box-shadow:inset 10px 10px 5px #888888;
	}
	.ball{
  		background: rgba(100,100,100,0.2);
  		width: 100px;
  		height: 100px;
  		padding: 10px;
  		border-radius: 50%;
  		box-shadow: 5px 8px 100px #333 inset, 10px 5px 2px blue,3px -1px 4px red;
		position:relative;
		left:50px;
		top:50px;
}
</style>
</head>
<body>
	<div></div>
	<div class="ball"></div>
</body>
</html>

4.效果如下:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值