初学HTML5——CSS阴影

最新推荐文章于 2021-12-18 21:34:33 发布

lxl。。

最新推荐文章于 2021-12-18 21:34:33 发布

阅读量380

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/lxl513513/article/details/105129815

版权

HTML5 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

一.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>