Google他的边框是怎么制作的？

Question

我在 google 新闻页面上，我想知道 google 如何在每个部分周围制作边框，因为我在检查器中找不到任何带边框的元素属性。我发现那些边框很细，我认为它不是属性和 CSS.

的边框

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;

提示：检查 class .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;
}

并使用 class 卡片创建 div。找到了一支相似的笔Link to example

Google他的边框是怎么制作的？

How does Google make his border?

html

css

border