1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" /> 7 <meta name="format-detection" content="telephone=no"> 8 <meta name="msapplication-tap-highlight" content="no"> 9 <style> 10 .btn_exc button{ 11 border: 1px solid #333333; 12 font-family: PingFang-SC-Regular; 13 font-size: 14px; 14 color: #333333; 15 height:30px; 16 text-align: center; 17 border-radius: 6px; 18 background: #FFF; 19 } 20 .btn_exc .tips:after { 21 position: absolute; 22 display: inline-block; 23 top: -7px; 24 left: 40px; 25 width: 0; 26 height: 0px; 27 content: ‘‘; 28 border-style: solid; 29 border-width: 7px; 30 border-color: #fff; 31 transform: rotate(-45deg); 32 box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.10); 33 } 34 .btn_exc .tips{ 35 display: none; 36 position: absolute; 37 z-index:100; 38 width:600px; 39 left:5px; 40 transform: translateY(5px); 41 -webkit-transform: translateY(5px); 42 text-align: justify; 43 background: #ffffff; 44 border-radius: 6px; 45 padding:0px 15px 15px 15px; 46 color: #666666; 47 font-family: PingFang-SC-Regular; 48 font-size: 14px; 49 box-shadow: 0px 0px 10px 0 rgba(0,0,0,0.10); 50 margin-top:10px; 51 52 } 53 .btn_exc .tips .one{ 54 height:15px; 55 width: 50px; 56 left:30px; 57 background: #ffffff; 58 position: absolute; 59 z-index:111; 60 } 61 </style> 62 </head> 63 <body> 64 <div class="btn_exc" > 65 <button onclick="open_tips()">点我弹窗</button> 66 <div class="tips" id="tips"> 67 <!--不加阴影可以去掉这个--> 68 <div class="one"></div> 69 <div style="margin-top:15px;"> 70 带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果 71 </div> 72 73 </div> 74 </div> 75 <script> 76 function open_tips(){ 77 document.getElementById(‘tips‘).style.display = ‘block‘; 78 } 79 </script> 80 </body> 81 </html>
带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效
果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效
果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效
果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效
果带阴影的弹窗效果带阴影的弹窗效果带阴影的弹窗效
原文：https://www.cnblogs.com/ssl0106/p/11649033.html