CSS阴影box-shodow总结_box-showdow-优快云博客

本文链接：https://blog.youkuaiyun.com/tuke_tuke/article/details/49306697

text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果

基本语法是 {box-shadow:[inset] x-offset y-offset blur-radius spread-radius color}

[inset/outset] 阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

blur-radius 阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

spread-radius 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

color阴影颜色：此参数可选。

为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。

<style type="text/css">
   .box-shadow{   
         -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;              //Safariand Google chrome10.0-  
         -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;  //Firefox4.0-   
         box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;//Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9      
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题 1</title>
  <style type="text/css">
   .d1{
     	width: 300px;
		height: 100px;
		border: 1px solid #2cb7fe;
		text-align: center;
		-webkit-box-shadow: 3px 3px 10px #9edeff;
		box-shadow: 3px 3px 10px #9edeff;
	}
    .d2{
	    width: 300px;
		height: 100px;
		border: 1px solid #2cb7fe;
		text-align: center;
		-webkit-box-shadow: 3px 3px 10px #9edeff  inset;
		box-shadow: 3px 3px 10px #9edeff  inset;	
}
     .d3{	
        width: 300px;
		height: 100px;
		border: 1px solid #2cb7fe;

        -webkit-box-shadow: 0 0 5px 3px #f00, 0 0 5px 6px #00f, 0 0 5px 10px #00FF00;
        box-shadow:0 0 5px 3px #f00, 0 0 5px 6px #00f, 0 0 5px 10px #00FF00;
}
   </style>
</head>

<body>
  <div class="d1">box-shadow:3px 3px 10px #9edeff;</div>
  <br>
  <div class="d2">box-shadow:3px 3px 10px #9edeff  inset;</div>
   <br>
  <div class="d3">box-shadow:多组属性用“,”隔开</div>


</body>

</html>