zoukankan html css js c++ java

css3 drop-shaow阴影效果

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="utf-8">
  5     <title>Demo: CSS drop-shadows without images &#8211; Nicolas Gallagher</title>
  6     <meta name="description" content="Using CSS pseudo-elements, box-shadows, and transforms to create drop-shadow effects without images from semantic HTML">
  7     
  8     <style>
  9         body {
 10             padding:20px 0 30px;
 11             font:14px/1.5 Arial, sans-serif;
 12             text-align:center;
 13             color:#333;
 14             background:#FAF0D9;
 15         }
 16 
 17         a {
 18             font-weight:bold;
 19             color:#346AA8;
 20         }
 21 
 22         a:hover,
 23         a:focus,
 24         a:active {
 25             text-decoration:none;
 26         }
 27 
 28         .container {
 29             position:relative;
 30             z-index:1;
 31             width:600px;
 32             padding:20px;
 33             margin:0 auto;
 34             background:#FAF0D9;
 35         }
 36 
 37         .container:after {
 38             content:"";
 39             display:block;
 40             clear:both;
 41             visibility:hidden;
 42             height:0;
 43             font-size:0;
 44         }
 45 
 46         /* Shared styles */
 47 
 48         .drop-shadow {
 49             position:relative;
 50             float:left;
 51             width:40%;
 52             padding:1em;
 53             margin:2em 10px 4em;
 54             background:#fff;
 55             -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 56             -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 57             box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 58         }
 59 
 60         .drop-shadow:before,
 61         .drop-shadow:after {
 62             content:"";
 63             position:absolute;
 64             z-index:-2;
 65         }
 66 
 67         .drop-shadow p {
 68             font-size:16px;
 69             font-weight:bold;
 70         }
 71 
 72         /* Lifted corners */
 73 
 74         .lifted {
 75             -moz-border-radius:4px;
 76             border-radius:4px;
 77         }
 78 
 79         .lifted:before,
 80         .lifted:after {
 81             bottom:15px;
 82             left:10px;
 83             width:50%;
 84             height:20%;
 85             max-width:300px;
 86             max-height:100px;
 87             -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 88             -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 89             box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 90             -webkit-transform:rotate(-3deg);
 91             -moz-transform:rotate(-3deg);
 92             -ms-transform:rotate(-3deg);
 93             -o-transform:rotate(-3deg);
 94             transform:rotate(-3deg);
 95         }
 96 
 97         .lifted:after {
 98             right:10px;
 99             left:auto;
100             -webkit-transform:rotate(3deg);
101             -moz-transform:rotate(3deg);
102             -ms-transform:rotate(3deg);
103             -o-transform:rotate(3deg);
104             transform:rotate(3deg);
105         }
106 
107         /* Curled corners */
108 
109         .curled {
110             border:1px solid #efefef;
111             -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
112             border-radius:0 0 120px 120px / 0 0 6px 6px;
113         }
114 
115         .curled:before,
116         .curled:after {
117             bottom:12px;
118             left:10px;
119             width:50%;
120             height:55%;
121             max-width:200px;
122             max-height:100px;
123             -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
124             -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
125             box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
126             -webkit-transform:skew(-8deg) rotate(-3deg);
127             -moz-transform:skew(-8deg) rotate(-3deg);
128             -ms-transform:skew(-8deg) rotate(-3deg);
129             -o-transform:skew(-8deg) rotate(-3deg);
130             transform:skew(-8deg) rotate(-3deg);
131         }
132 
133         .curled:after {
134             right:10px;
135             left:auto;
136             -webkit-transform:skew(8deg) rotate(3deg);
137             -moz-transform:skew(8deg) rotate(3deg);
138             -ms-transform:skew(8deg) rotate(3deg);
139             -o-transform:skew(8deg) rotate(3deg);
140             transform:skew(8deg) rotate(3deg);
141         }
142 
143         /* Perspective */
144 
145         .perspective:before {
146             left:80px;
147             bottom:5px;
148             width:50%;
149             height:35%;
150             max-width:200px;
151             max-height:50px;
152             -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
153             -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
154             box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
155             -webkit-transform:skew(50deg);
156             -moz-transform:skew(50deg);
157             -ms-transform:skew(50deg);
158             -o-transform:skew(50deg);
159             transform:skew(50deg);
160             -webkit-transform-origin:0 100%;
161             -moz-transform-origin:0 100%;
162             -ms-transform-origin:0 100%;
163             -o-transform-origin:0 100%;
164             transform-origin:0 100%;
165         }
166 
167         .perspective:after {
168             display:none;
169         }
170 
171         /* Raised shadow - no pseudo-elements needed */
172 
173         .raised {
174             -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
175             -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
176             box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
177         }
178 
179         /* Curved shadows */
180 
181         .curved:before {
182             top:10px;
183             bottom:10px;
184             left:0;
185             right:50%;
186             -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
187             -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
188             box-shadow:0 0 15px rgba(0,0,0,0.6);
189             -moz-border-radius:10px / 100px;
190             border-radius:10px / 100px;
191         }
192 
193         .curved-vt-2:before {
194             right:0;
195         }
196 
197         .curved-hz-1:before {
198             top:50%;
199             bottom:0;
200             left:10px;
201             right:10px;
202             -moz-border-radius:100px / 10px;
203             border-radius:100px / 10px;
204         }
205 
206         .curved-hz-2:before {
207             top:0;
208             bottom:0;
209             left:10px;
210             right:10px;
211             -moz-border-radius:100px / 10px;
212             border-radius:100px / 10px;
213         }
214 
215         /* Rotated box */
216 
217         .rotated {
218             -webkit-box-shadow:none;
219             -moz-box-shadow:none;
220             box-shadow:none;
221             -webkit-transform:rotate(-3deg);
222             -moz-transform:rotate(-3deg);
223             -ms-transform:rotate(-3deg);
224             -o-transform:rotate(-3deg);
225             transform:rotate(-3deg);
226         }
227 
228         .rotated > :first-child:before {
229             content:"";
230             position:absolute;
231             z-index:-1;
232             top:0;
233             bottom:0;
234             left:0;
235             right:0;
236             background:#fff;
237             -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
238             -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
239             box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
240         }
241 
242     </style>
243 
244 </head>
245 <body>
246     <div class="container">
247         <h1><a href="/css-drop-shadows-without-images/">CSS drop-shadows without images</a></h1>
248 
249         <div class="drop-shadow lifted">
250             <p>Lifted corners</p>
251         </div>
252 
253         <div class="drop-shadow curled">
254             <p>Curled corners</p>
255         </div>
256 
257         <div class="drop-shadow perspective">
258             <p>Perspective</p>
259         </div>
260 
261         <div class="drop-shadow raised">
262             <p>Raised box</p>
263         </div>
264 
265         <div class="drop-shadow curved curved-vt-1">
266             <p>Single vertical curve</p>
267         </div>
268 
269         <div class="drop-shadow curved curved-vt-2">
270             <p>Vertical curves</p>
271         </div>
272 
273         <div class="drop-shadow curved curved-hz-1">
274             <p>Single horizontal curve</p>
275         </div>
276 
277         <div class="drop-shadow curved curved-hz-2">
278             <p>Horizontal curves</p>
279         </div>
280 
281         <div class="drop-shadow lifted rotated">
282             <p>Rotated box</p>
283         </div>
284     </div>
285 </body>
286 </html>

对应效果图如下：

查看全文

相关阅读:
Linux 从4.12内核版本开始移除了 tcp_tw_recycle 配置。 tcp_max_tw_buckets TIME-WAIT 稳定值
 https://www.cnblogs.com/wclwcw/p/7515515.html
Builder 模式
 网络优化之net.ipv4.tcp_tw_recycle和tcp_tw_reuse参数
 13 | 实战：单机如何实现管理百万主机的心跳服务？ https://time.geekbang.org/column/article/240656
V2版的接口在V3版里面都能找到对应接口数据结构
 。SLI，Service Level Indicator，服务等级指标，其实就是我们选择哪些指标来衡量我们的稳定性。而 SLO，Service Level Objective，服务等级目标，指的就是我们设定的稳定性目标，比如“几个 9”这样的目标。
【自愈能力集】：基于原子化服务能力封装，目前已实现绕行开关、域名切换、服务隔离等多项服务能力，并在生产中使用。紧密结合故障场景，不断更新自愈能力，通过各个能力的有机组合，能力集已见雏形；
阿里云弹性公网IP那些事阿里云云栖号 6月1日弹性公网IP是独立的公网IP资源，可以绑定到阿里云专有网络VPC类型的ECS、NAT网关、私网负载均衡SLB上，并可以动态解绑，实现公网IP和ECS、NAT网关、SLB的解耦，满足灵活管理的要求。阿里云弹性公网IP那些事阿里云云栖号 6月1日弹性络VPC类型的E
Linux下nf_conntrack（最全面）_董明磊-CSDN博客_nf_conntrack https://blog.csdn.net/qq_35299863/article/details/79530732

原文地址：https://www.cnblogs.com/imsomnus/p/4460982.html