使用截取樣式設計箱形陰影元素

Question

我們正在嘗試創建一個HTML頁面，其中包含砌體樣式的浮動元素，其中包含圖片和標題。元素有陰影，頁面有輕微的漸變背景。已經訪問過的目標有一個折角。

的折角導致兩個問題：

1）我們怎樣才能在右側和底部兩側的摺疊角之前進行元素的的box-shadow結束了嗎？我們是否需要使用包含半透明漸變的div s來完成前CSS3方式的陰影？

2）如何做摺疊的角落本身？我們不能只在白色背景上的右下角添加圖像，因爲頁面的背景漸變必須透過。

Answer 1

到目前爲止，我已經想到了這樣做的四種方式：

方法1：這背後的一個想法是使用在.box兩個僞元素拿到角球，然後兩個僞.box-text上的要素可以獲得右側的陰影 - demo。這個問題最大的問題是它是......好吧，醜陋。

HTML結構：

<div class="box"> 
    <header></header> 
    <div class="box-text"> 
     <p>Text</p> 
    </div> 
</div> 

相關CSS：

body { 
    background: #ccc; 
} 
.box { 
    box-shadow: 2px 2px 13px #000; 
    position: relative; 
    background: white; 
} 
.box:before, .box:after, .box-text:before, .box-text:after { 
    position: absolute; 
    content: ''; 
} 
.box:before { 
    bottom: -25px; 
    right: -25px; 
    width: 75px; 
    height: 75px; 
    background: #ccc; 
} 
.box:after { 
    bottom: 0; 
    right: 0; 
    width: 50px; 
    height: 50px; 
    box-shadow: -2px -2px 2px #777; 
    background: linear-gradient(-45deg, transparent 38%, #333 50%, #faf0f0 50%); 
} 
.box-text:before { 
    bottom: 32px; 
    right: -15px; 
    width: 15px; 
    height: 18px; 
    background: radial-gradient(top left, #333 0%, transparent 40%); 
} 
.box-text:after { 
    bottom: -15px; 
    right: 32px; 
    width: 18px; 
    height: 15px; 
    background: radial-gradient(top left, #333 0%, transparent 40%); 
} 

---

方法2：使用傾斜僞元件對於該特定角結合的陰影在一個更好的方式（I會在僞元素上產生陰影） - demo

我認爲這個看起來更好，也有在IE9中工作的優勢（前一個沒有，因爲它使用了CSS漸變）。

的HTML是完全相同的和CSS將成爲：

.box { 
    box-shadow: 0 0 5px 1px #777; 
    position: relative; 
    background: white; 
} 
.box:before, .box:after, .box-text:before { 
    position: absolute; 
    z-index: 2; 
    content: ''; 
} 
.box:before { 
    bottom: -38px; 
    right: -38px; 
    width: 71px; 
    height: 71px; 
    transform: rotate(45deg); 
    z-index: 1; 
    background: #ccc; 
} 
.box:after { 
    bottom: 0; 
    right: 0; 
    border: solid 23px #f9f0f0; 
    border-bottom-color: transparent; 
    border-right-color: transparent; 
    box-shadow: -1px -1px 2px #777; 
    z-index: 4; 
} 
.box-text:before { 
    right: 0; 
    bottom: 22px; 
    width: 47px; 
    box-shadow: 2px 2px 3px 1px #777; 
    transform: skewY(-45deg); 
} 

---

方法3：我從以前的方法的想法 - demo。我認爲前一個看起來雖然略有更好...

CSS已經改變：

.box:before { 
    bottom: -24px; 
    right: -7px; 
    width: 35px; 
    height: 70px; 
    box-shadow: inset 2px 0 3px 1px #999; 
    transform: rotate(45deg); 
    z-index: 1; 
    background: #ccc; 
} 
.box:after { 
    bottom: 0; 
    right: 0; 
    border: solid 23px #f9f0f0; 
    border-bottom-color: transparent; 
    border-right-color: transparent; 
    box-shadow: -1px -1px 2px #777; 
    z-index: 4; 
} 
.box-text:before { 
    bottom: -27px; 
    right: -10px; 
    width: 35px; 
    height: 70px; 
    transform: rotate(45deg); 
    background: #ccc; 
} 

方法4：只使用2僞元素，都在包裝盒 - demo

.box:before, .box:after { 
    position: absolute; 
    z-index: 2; 
    content: ''; 
} 
.box:before { 
    right: -8px; 
    bottom: 22px; 
    width: 65px; 
    box-shadow: 2px 2px 5px 1px #777, 0 25px 0 25px #ccc; 
    transform: rotate(-45deg); 
} 
.box:after { 
    bottom: 0; 
    right: 0; 
    border: solid 23px #f9f0f0; 
    border-bottom-color: transparent; 
    border-right-color: transparent; 
    box-shadow: -1px -1px 2px #777; 
    z-index: 4; 
}