Google如何製作邊框？

Question

我在谷歌新聞頁面，我想知道谷歌如何使他的邊界周圍每個部分，因爲我無法在檢查器中找到任何具有邊界屬性的元素。我發現這些邊界非常薄。謝謝你的幫助 。

這裏是鏈接：https://news.google.com

Answer 1

，如果你檢查好了，然後你會看到它的一個box-shadow而不是邊界，這是他們在CSS中使用什麼，請再次檢查，

box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04); 
background-color: #fff; 

提示：請檢查課程.lPV2Xe

Answer 2

因爲這不是邊框。這是一個箱子陰影。

這種影響可以通過

.card { 
    background: white; 
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04); 
} 
.card:hover{ 
box-shadow: 0px 8px 10px 0 grey; 
-webkit-transition: box-shadow .3s ease-in; 
} 

創建並創建一個類卡一個div。 found found a similar pen Link to example