【CSS3】-曲线阴影翘边阴影_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

【CSS3】-曲线阴影翘边阴影_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:43 AM

效果图

代码

index

<!DOCTYPE html><html><head><meta charset=utf-8 /><title>box-shadow</title><link rel="stylesheet" href="css/style.css"></head><body>  <div class="wrap effect">     <h3 id="Shadow-Effect">Shadow Effect</h3>  </div>  <ul class="box">      <li><img  src="/static/imghwm/default1.png"  data-src="images/photo1.jpg"  class="lazy"/ alt="【CSS3】-曲线阴影翘边阴影_html/css_WEB-ITnose" ></li>      <li><img  src="/static/imghwm/default1.png"  data-src="images/photo2.jpg"  class="lazy"/ alt="【CSS3】-曲线阴影翘边阴影_html/css_WEB-ITnose" ></li>      <li><img  src="/static/imghwm/default1.png"  data-src="images/photo3.jpg"  class="lazy"/ alt="【CSS3】-曲线阴影翘边阴影_html/css_WEB-ITnose" ></li>  </ul></body></html>

css

body{    font-family: Arial;    font-size: 24px;}/*位置样式*/.wrap h3{    text-align: center;    position: relative;    top:100px;}.wrap{    width: 50%;    height: 300px;    background: #FFF;    margin:20px auto;}/*阴影样式 box-shadow: h-shadow v-shadow blur spread color inset;*//*边框阴影*/.effect{    position: relative;    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.2) inset;}/*下边的曲线阴影*/.effect:before,.effect:after{    content:"";    position: absolute;    z-index: -1;    left: 6px;    right:6px;    bottom: 0;    top:95%;    background: red;    border-radius: 100px / 10px;    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);}/*照片*/.box{    width: 980px;    height: auto;    margin:20px auto;    padding: 0;    clear: both;    overflow: hidden;}.box li img {    width: 290px;    height: 210px;    padding: 5px;}ul.box li{    background: #fff;    list-style: none;    width: 300px;    height: 220px;    margin:20px 10px;    line-height: 220px;    border: 2px solid #efefef;    position: relative;    float: left;    padding: 0;    text-align: center;}/*照片阴影*/ul.box li:before{    content:"";    position: absolute;    z-index: -1;    width: 85%;    height: 80%;    left: 20px;    bottom: 5px;    background: red;    transform: skew(14deg) rotate(3deg) ;    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);}ul.box li:after{    content:"";    position: absolute;    z-index: -1;    width: 85%;    height: 80%;    right: 20px;    bottom: 5px;    background: red;    transform: skew(-14deg) rotate(-3deg) ;    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);}

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，