如何在CSS中创建一个看起来像这个按钮的div

Question

我正在尝试创建一个具有以下类似CSS的div。

虽然我不知道如何只使用CSS来获得那种纹理，但是如何添加多个边框（白色边框周围的黑色边框和内部内容都有一点渐变的阴影外观。

Here is my fiddle : https://jsfiddle.net/ad4xv9mt/11/

fiddle link

编辑：添加清晰图像

Answer 1

对于边框，您可以使用多个框阴影，对于背景，您可以使用线性/径向渐变来获得与图像类似的内容：

.container {
  height: 600px;
  width: 600px;
  background-color: #333;
  padding: 5px;
}

.box1 {
  background:
  radial-gradient(circle at center, #984675 20%,purple )0 0/10px 10px ;
  height: 50px;
  margin: 20px;
  width: 400px;
  border-radius: 20px;
  border: 2px #fff solid;
  box-shadow: inset 0 0 20px #000000,
  2px 2px 1px red,
  -2px -2px 1px red,
  -2px 2px 1px red,
  2px -2px 1px red;
}

<div class='container'>

  <div class="box1">

  </div>

</div>

Answer 2

你的模式是一种高度复杂的模式：它包含交替的正弦线，用于划分镜像的水滴状区域，每个区域都由偏移的圆形背景渐变填充，以创建从顶部略微照亮的3d圆形凸起的错觉。

使用任何工具（Adobe产品或类似工具）重新创建此模式需要高级技能水平，尤其是如果结果必须是矢量（无损可缩放图像质量）。要求编程这样的矢量图像模式显然是在SO上的 off-topic ，至少有三个原因：

• 不是帮助中心中定义的编程问题，
• 你自己没有尝试过编码，
• 太宽泛（需要太多工作）

理智的替代方法是在没有应用任何阴影的情况下找到图像的最小可重复裁剪，并使用background-repeat属性。最重要的是，按照Temani的回答中的建议应用阴影 关于“自然”box-shadow效果的宝贵资源是AngularJS Material Design的Whiteframe（您需要使用浏览器的开发工具并检查元素）。

就CSS而言，你需要

background-image: url('link-to-image');
background-repeat: repeat;

...应用于您的按钮，将图像重复为背景。有关更多background技巧，请参阅this post。