/**/.flex{display:flex;flex-wrap:wrap;} .flex-item{margin-right:30px;}.box { ._阴影样式">
devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS设置阴影样式大全 包含所有样式 有图有代码

作者：我家自动化 | 2024-03-18 22:58:36

赞

踩

阴影样式

常用的样式：

下面还有特殊的效果 

  1. <html>
  2. <head>
  3.     <title></title>
  4.     <style type="text/css">
  5. /*<!-- ————————————  最简单的常规效果  —————————————————————— -->*/
  6. .flex{display:flex;flex-wrap:wrap;} 
  7. .flex-item{margin-right:30px;}
  8. .box {  background-color: #CCCCCC; border-radius:10px; width: 200px; height: 200px;  }
  9. .boxshadow1{ box-shadow:inset 0px 0px 5px 1px #000; }/*内阴影示例*/
  10. .boxshadow2{ box-shadow:inset 0 1px 2px 1px #000; }/*3边内影示例*/
  11. .boxshadow3{box-shadow:0 0 10px #000;}/*外阴影示例*/
  12. .boxshadow4{box-shadow:2px 2px 5px #000;}/*右下外阴影示例*/
  13. .boxshadow5{box-shadow:0 0 5px 15px #000;}/*扩大阴影示例*/
  14. .boxshadow6{box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);}/*半透明阴影色示例*/
  15.  
  16. /*<!-- ————————————  单边阴影效果  —————————————————————— -->*/
  17. .flex{display:flex;flex-wrap:wrap;} 
  18. .flex-item{margin-right:30px;}
  19. .box {  background-color: #CCCCCC;  width: 200px; height: 200px;  }
  20. .boxshadow12{ box-shadow:inset 0px 15px 10px -15px #000; }/*上边内阴影示例*/
  21. .boxshadow22{ box-shadow:inset -15px 0px  10px -15px #000;}/*右边内阴影示例*/
  22. .boxshadow32{box-shadow:0px 12px 8px -12px #000; border-radius:10px; }/*下边外阴影示例*/
  23. .boxshadow42{box-shadow:3px 0 8px -4px #000;}/*右边外阴影示例*/
  24. .boxshadow52{ box-shadow: inset 0px -1px 0px 0px rgb(0, 0, 0) ;}/*下边细线示例*/
  25. /*<!-- ————————————  双边边阴影及多重阴影效果  —————————————————————— -->*/
  26.  
  27. .flex{display:flex;flex-wrap:wrap;} 
  28. .flex-item{margin-right:30px;}
  29. .box {  background-color: #CCCCCC;  width: 200px; height: 200px;  }
  30. .boxshadow13{ /*上下边内阴影示例*/
  31.   box-shadow:inset 0px 15px 15px -15px #000,
  32.              inset 0px -15px 15px -15px #000; 
  33. }
  34. .boxshadow23{ /*左右边外阴影示例*/
  35.   box-shadow:15px 0 15px -15px #000,
  36.              -15px 0 15px -15px #000;
  37. }
  38. .boxshadow33{/*多层阴影示例*/
  39.     border-radius:10px; 
  40.     box-shadow:0px 0px 0px 3px #bb0a0a,
  41.     0px 0px 0px 6px #2e56bf,
  42.     0px 0px 0px 9px #ea982e;
  43. }
  44.  
  45. /*<!-- ————————————  其他一些有意思的阴影：  —————————————————————— -->*/
  46. .box11 {
  47.     width: 300px;
  48.     height: 100px;
  49.     background: #ccc;
  50.     border-radius: 10px;
  51.     margin: 10px;
  52. }
  53. .shadow {
  54.     position: relative;
  55.     max-width: 270px;
  56.     box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
  57.                 0px 0px 20px rgba(0,0,0,0.1) inset;
  58. }
  59. .shadow::before,
  60. .shadow::after {
  61.    content:"";
  62.    position:absolute;
  63.    z-index:-1;
  64. }
  65. .shadow::before,
  66. .shadow::after {
  67.    content:"";
  68.    position:absolute;
  69.    z-index:-1;
  70.    bottom:15px;
  71.    left:10px;
  72.    width:50%;
  73.    height:20%;
  74. }
  75. .shadow::before,
  76. .shadow::after {
  77.    content:"";
  78.    position:absolute;
  79.    z-index:-1;
  80.    bottom:15px;
  81.    left:10px;
  82.    width:50%;
  83.    height:20%;
  84.    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  85.    transform:rotate(-3deg);
  86. }
  87. .shadow::after{
  88.    right:10px;
  89.    left:auto;
  90.    transform:rotate(3deg);
  91.  }
  92.     </style>
  93. </head>
  94. <body>
  95.  
  96.     <!-- ————————————  最简单的常规效果  —————————————————————— -->
  97.     <div class="flex">
  98.       <div class="flex-item">
  99.         <h3>内阴影示例</h3>
  100.         <div class="box boxshadow1"></div>
  101.       </div>
  102.  
  103.       <div class="flex-item">
  104.         <h3>3边内影示例</h3>
  105.         <div class="box boxshadow2"></div>
  106.       </div>
  107.       <div class="flex-item">
  108.         <h3>外阴影示例</h3>
  109.         <div class="box boxshadow3"></div>
  110.       </div>
  111.       <div class="flex-item">
  112.         <h3>右下外阴影示例</h3>
  113.         <div class="box boxshadow4"></div>
  114.       </div>
  115.       <div class="flex-item">
  116.         <h3>扩大阴影示例</h3>
  117.         <div class="box boxshadow5"></div>
  118.       </div>
  119.       <div class="flex-item">
  120.         <h3>半透明阴影色示例</h3>
  121.         <div class="box boxshadow6"></div>
  122.       </div>
  123.     </div>
  124.     
  125.     <!-- ————————————  单边阴影效果  —————————————————————— -->
  126.     <div class="flex">
  127.       <div class="flex-item">
  128.         <h3>上边内阴影示例</h3>
  129.         <div class="box boxshadow12"></div>
  130.       </div>
  131.       <div class="flex-item">
  132.         <h3>右边内阴影示例</h3>
  133.         <div class="box boxshadow22"></div>
  134.       </div>
  135.       <div class="flex-item">
  136.         <h3>下边外阴影示例</h3>
  137.         <div class="box boxshadow32"></div>
  138.       </div>
  139.       <div class="flex-item">
  140.         <h3>右边外阴影示例</h3>
  141.         <div class="box boxshadow42"></div>
  142.       </div>
  143.       <div class="flex-item">
  144.         <h3>下边细线示例</h3>
  145.         <div class="box boxshadow52"></div>
  146.       </div>
  147.     </div>
  148.  
  149.     <!-- ————————————  双边边阴影及多重阴影效果  —————————————————————— -->
  150.  
  151.     <div class="flex">
  152.       <div class="flex-item">
  153.         <h3>上下边内阴影示例</h3>
  154.         <div class="box boxshadow13"></div>
  155.       </div>
  156.       
  157.       <div class="flex-item">
  158.         <h3>左右边外阴影示例</h3>
  159.         <div class="box boxshadow23"></div>
  160.       </div>
  161.       <div class="flex-item">
  162.         <h3>多层阴影示例</h3>
  163.         <div class="box boxshadow33"></div>
  164.       </div>
  165.     </div>
  166.     
  167.     <!-- ————————————  其他一些有意思的阴影：  —————————————————————— -->
  168.     <div class="box11 shadow"></div>
  169.  
  170.  
  171. </body>
  172. </html>

扩展内容

 

  1. <html>
  2. <head>
  3.     <title></title>
  4.     <style type="text/css">
  5.         body{
  6.   background:#E6EEF6;
  7. }
  8. .wrap{
  9.   margin-left:20px;
  10. }
  11. .box{
  12.   width:40%;
  13.   height:200px;
  14.   float:left;
  15.   background-color:white; 
  16.   margin:25px 15px;
  17.   border-radius:5px;
  18. }
  19. .box h3{
  20.   font-family: 'Didact Gothic', sans-serif;
  21.   font-weight:normal;
  22.   text-align:center;
  23.   padding-top:60px;
  24.   color:#fff;
  25. }
  26. .box1{
  27.   background-color: #EBA39E;
  28. }
  29. .box2{
  30.   background-color: #EDE89A;
  31. }
  32. .box3{
  33.   background-color: #9EEBA1;
  34. }
  35. .box4{
  36.   background-color: #9EEBBF;
  37. }
  38. .box5{
  39.   background-color: #9ED9EB;
  40. }
  41. .box6{
  42.   background-color: #9EB3EB;
  43. }
  44. .box7{
  45.   background-color: #DB9EEB;
  46. }
  47. .box8{
  48.   background-color: #C49EEB;
  49. }
  50. .shadow1, .shadow2, .shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
  51.   position:relative;
  52. }
  53. .shadow1,.shadow2,.shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
  54.     box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
  55. }
  56. /*****************************************************************dashed border
  57. ****************************************************************/
  58. .shadow1 h3, .shadow2 h3, .shadow3 h3, .shadow4 h3, .shadow5 h3, .shadow6 h3, .shadow7 h3, .shadow8 h3{
  59.   width:87%;
  60.   height:100px;
  61.   margin-left:6%;
  62.   border:2px dashed #F7EEEE;
  63.   border-radius:5px;
  64. }
  65. /****************************************************************
  66. *styling shadows
  67. ****************************************************************/
  68. .shadow1:before, .shadow1:after{
  69.   position:absolute;
  70.   content:"";
  71.   bottom:12px;left:15px;top:80%;
  72.   width:45%;
  73.   background:#9B7468;
  74.   z-index:-1;
  75.   -webkit-box-shadow: 0 20px 15px #9B7468;
  76.   -moz-box-shadow: 0 20px 15px #9B7468;
  77.   box-shadow: 0 20px 15px #9B7468;
  78.   -webkit-transform: rotate(-6deg);
  79.   -moz-transform: rotate(-6deg);
  80.   transform: rotate(-6deg);
  81. }
  82. .shadow1:after{
  83.   -webkit-transform: rotate(6deg);
  84.   -moz-transform: rotate(6deg);
  85.   transform: rotate(6deg);
  86.   right: 15px;left: auto;
  87. }
  88. .shadow2:before{
  89.   position:absolute;
  90.   content:"";
  91.   width:80%;
  92.   top:140px;bottom:15px;left:30px;
  93.   background-color:#9F8641;
  94.   z-index:-1;
  95.   -webkit-box-shadow:0 23px 17px 0 #9F8641;
  96.   -moz-box-shadow:0 23px 17px 0 #9F8641;
  97.   box-shadow: 0 23px 17px 0 #9F8641;
  98.   -webkit-transform:rotate(-4deg);
  99.   -moz-transform:rotate(-4deg);
  100.   transform:rotate(-4deg);
  101. }
  102. .shadow3:before, .shadow3:after{
  103.   content:"";
  104.   position:absolute;
  105.   bottom:0;top:2px;left:15px;right:15px;
  106.   z-index:-1;
  107.   border-radius:100px/30px;
  108.  -webkit-box-shadow:0 0 30px 2px #479F41;
  109.   -moz-box-shadow:0 0 30px 2px #479F41;
  110.   box-shadow: 0 0 30px 2px #479F41;
  111. }
  112. .shadow4:before, .shadow4:after{
  113.   position:absolute;
  114.   content:"";
  115.   top:14px;bottom:14px;left:0;right:0;
  116.   box-shadow:0 0 25px 3px #548E7F;
  117.   border-radius:100px/10px;
  118.   z-index:-1;
  119. }
  120. .shadow5:before, .shadow5:after{
  121.   position:absolute;
  122.   content:"";
  123.   box-shadow:0 10px 25px 20px #518C96;
  124.   top:40px;left:10px;bottom:50px;
  125.   width:15%;
  126.   z-index:-1;
  127.   -webkit-transform: rotate(-8deg);
  128.   -moz-transform: rotate(-8deg);
  129.   transform: rotate(-8deg);
  130. }
  131. .shadow5:after{
  132.   -webkit-transform: rotate(8deg);
  133.   -moz-transform: rotate(8deg);
  134.   transform: rotate(8deg);
  135.   right: 10px;left: auto;
  136. }
  137. .shadow6:before, .shadow6:after{
  138.   position:absolute;
  139.   content:"";
  140.   top:100px;bottom:5px;left:30px;right:30px;
  141.   z-index:-1;
  142.   box-shadow:0 0 40px 13px #486685;
  143.   border-radius:100px/20px; 
  144. }
  145. .shadow7:before, .shadow7:after{
  146.   position:absolute;
  147.   content:"1";
  148.   top:25px;left:20px;bottom:150px;
  149.   width:80%;
  150.   z-index:-1;
  151.   -webkit-transform: rotate(-6deg);
  152.   -moz-transform: rotate(-6deg);
  153.   transform: rotate(-6deg);
  154. }
  155. .shadow7:before{
  156.   box-shadow:10px -10px 30px 15px #984D8E;
  157. }
  158. .shadow7:after{
  159.   -webkit-transform: rotate(7deg);
  160.   -moz-transform: rotate(7deg);
  161.   transform: rotate(7deg);
  162.   bottom: 25px;top: auto;
  163.   box-shadow:10px 10px 30px 15px #984D8E;
  164. }
  165. .shadow8{
  166.   box-shadow:
  167.  -6px -6px 8px -4px rgba(250,254,118,0.75),
  168.   6px -6px 8px -4px rgba(254,159,50,0.75),
  169.   6px 6px 8px -4px rgba(255,255,0,0.75),
  170.   6px 6px 8px -4px rgba(0,0,255,2.75);
  171. }
  172.     </style>
  173. </head>
  174. <body>
  175.     <div class="wrap">
  176.   <div class="box box1 shadow1">
  177.     <h3>Shadow 1</h3>
  178.   </div>
  179.   <div class="box box2 shadow2">
  180.     <h3>Shadow 2</h3>
  181.   </div>
  182.   <div class="box box3 shadow3">
  183.     <h3>Shadow 3</h3>
  184.   </div>
  185.   <div class="box box4 shadow4">
  186.     <h3>Shadow 4</h3>
  187.   </div>
  188.   <div class="box box5 shadow5">
  189.     <h3>Shadow 5</h3>
  190.   </div>
  191.   <div class="box box6 shadow6">
  192.     <h3>Shadow 6</h3>
  193.   </div>
  194.   <div class="box box7 shadow7">
  195.     <h3>Shadow 7</h3>
  196.   </div>
  197.   <div class="box box8 shadow8">
  198.     <h3>Shadow 8</h3>
  199.   </div>
  200. </div>  
  201. </body>
  202. </html>

 

再来看一些美轮美奂的效果：https://codersblock.com/blog/creating-glow-effects-with-css/

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/266055
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号