CSS CSS Drop Shadow

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS CSS Drop Shadow相关的知识，希望对你有一定的参考价值。

****************
***** CSS ******
****************

.dropShadow {
	position:relative;
	z-index:1;
}

/*border boxes; inside--&gt;outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3, 
.dropShadow .drop4, .dropShadow .drop5 {
	position:absolute;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }

.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2, .dropShadow.dropBR .drop3, 
.dropShadow.dropBR .drop4, .dropShadow.dropBR .drop5 {
	top:0; left:0;			/*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2, .dropShadow.dropBL .drop3, 
.dropShadow.dropBL .drop4, .dropShadow.dropBL .drop5 {
	top:0; left:-16px;		/*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2, .dropShadow.dropTR .drop3, 
.dropShadow.dropTR .drop4, .dropShadow.dropTR .drop5 {
	top:-16px; left:0;		/*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2, .dropShadow.dropTL .drop3, 
.dropShadow.dropTL .drop4, .dropShadow.dropTL .drop5 {
	top:-16px; left:-16px;	/*shadow positioned top-left*/
}

/*top &amp; bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div, .dropShadow .drop3 div, 
.dropShadow .drop4 div, .dropShadow .drop5 div {
	position:absolute;
	top:8px; right:0; bottom:0; left:8px;
	border-style:solid;
	border-color:#999999;
}
.dropShadow .drop1 div { margin:7px -1px -1px 7px; border-width:1px 0 1px 0; background-color:#999999; }
.dropShadow .drop2 div { margin:6px -2px -2px 6px; border-width:1px 0 1px 0; }
.dropShadow .drop3 div { margin:4px -4px -4px 4px; border-width:2px 0 2px 0; }
.dropShadow .drop4 div { margin:2px -6px -6px 2px; border-width:2px 0 2px 0; }
.dropShadow .drop5 div { margin:0 -8px -8px 0; border-width:2px 0 2px 0; }

/*left &amp; right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div, .dropShadow .drop3 div div, 
.dropShadow .drop4 div div, .dropShadow .drop5 div div {
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }

/*content being shadowed*/
.dropShadow .dropContent {
	position:relative;
	z-index:1;
	background-color:white;
}

****************
***** HTML *****
****************

&lt;div class=&quot;dropShadow dropBR&quot; style=&quot;float:left; position:absolute;&quot;&gt;
	&lt;div class=&quot;drop1&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
	&lt;div class=&quot;drop2&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
	&lt;div class=&quot;drop3&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
	&lt;div class=&quot;drop4&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
	&lt;div class=&quot;drop5&quot;&gt;&lt;div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
	&lt;div class=&quot;dropContent&quot; style=&quot;border:1px solid black; padding:2px;&quot;&gt;
		
		&lt;img src=&quot;birdhouse4.gif&quot;&gt;
		
	&lt;/div&gt;
&lt;/div&gt;

以上是关于CSS CSS Drop Shadow的主要内容，如果未能解决你的问题，请参考以下文章

CSS3 filter:drop-shadow滤镜与box-shadow区别应用

CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果

CSS3 filter:drop-shadow滤镜与box-shadow区别应用抄的

filter: drop-shadow和box-shadow, 用于CSS设计漂亮的阴影

css http://stackoverflow.com/questions/5460129/drop-shadow-only-bottom-css3/5474913

CSS进阶box-shadow 与 filter:drop-shadow 详解及奇技淫巧