仅使用css来完成此布局

html5 • • 问答 • 208 阅读

一开始我觉得很简单，直到我尝试...

有没有css之神可以帮助我大声笑

我完成了外面，但我只有一个tsudo内容，如何设置两颗星和一个字......？（不是一个真正的按钮，看起来就可以了）

我发布了我到目前为止所做的事情，很抱歉描述不清楚，它看起来像一个按钮，而不是哈哈。

#foo::after {
  content: "";
  position: absolute;
  height: 31px;
  width: 101px;
  border: 1px solid rgb(90, 90, 90);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  box-shadow: 1px 1px 1px lightgrey;
}

#foo::before {
  content: "";
  color: rgb(78, 78, 78);
  font-weight: bold;
  font-size: 10px;
  position: absolute;
  height: 24px;
  width: 93px;
  border: 1px solid rgb(161, 161, 161);
  /* box-shadow: 1px 1px rgb(134, 134, 134); */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  background: linear-gradient(rgb(230, 228, 228) 53%, rgb(199, 199, 199) 55%);
}

#foo {
  position: relative;
  height: 30px;
  width: 100px;
  border: 1px solid white;
  border-radius: 8px;
  background: rgb(209, 206, 206);
}
<div>
</div>
<div>
</div>

回答

像这样：

秘诀是使用多个框阴影来获得框的轮廓。

并使用线性渐变背景

现在您可以使用::after和::before添加文本（结帐、星星）

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');
#foo::after {
  content: "checkout";
  font-weight: bold;
  position: absolute;
  text-transform: uppercase;
  color: #555555;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}

#foo::before {
  content: "?                    ?";
  white-space: pre;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 0 rgb(255 255 255 / 80%);
  color: #888888;
  font-size: 1.25em
}

#foo {
  font-family: 'Open Sans';
  position: relative;
  margin: 25px;
  height: 40px;
  width: 160px;
  border: 1px solid white;
  border-radius: 5px;
  background: linear-gradient(to top, #AEAEAE, #C4C4C4 48%, #D5D5D5 52%, #E1E1E1);
  border: 1px solid #8C8C8C;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px 0 #616161, 0 0 0 4px #CBCBCB, 0 0 0 5.5px #FFFFFF, 0 0 0 7px #555555;
}

  • I would also add `text-shadow: 0 1px 0 rgb(255 255 255 / 80%)` to the text and the stars to add the embossing effect.

以上是仅使用css来完成此布局的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容