如何用CSS制作仿按钮样式的div（含多重边框、纹理与渐变阴影）

嘿，我来帮你搞定这个div样式！咱们一步步拆解你需要的几个核心效果：多重边框（白+深色）、纹理背景，还有内部的渐变阴影。

1. 多重边框效果 #

实现白边在内、深色边在外的双层边框，有两种简单的CSS方案可选：

方案一：使用border + outline #

这种方法不额外占用布局空间，非常灵活：

.your-div {
  border: 2px solid #ffffff; /* 内层白色边框 */
  outline: 2px solid #2d2d2d; /* 外层深色边框 */
  outline-offset: -4px; /* 调整外层边框与内层的间距，负值让它向内收缩，和白边部分重叠 */
}

方案二：使用多层box-shadow #

用阴影的spread属性来模拟边框，同样不影响布局：

.your-div {
  box-shadow: 
    0 0 0 2px #2d2d2d, /* 深色外层边框（spread值为2px） */
    0 0 0 4px #ffffff; /* 白色内层边框（spread值为4px，覆盖深色的内层） */
}

2. 纹理背景效果 #

纯CSS就能模拟细微的纹理，比如用多层线性渐变组合出格子纹理：

.your-div {
  background-image: 
    linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.05) 75%);
  background-size: 20px 20px; /* 控制纹理的大小 */
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

你可以调整rgba的透明度、background-size来匹配你需要的纹理细腻程度。

3. 内部渐变阴影效果 #

要实现内容区域的轻微渐变阴影，有两种思路：

思路一：内阴影inset #

如果是均匀的内部阴影，直接用inset属性：

.your-div {
  box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
}

思路二：渐变叠加背景 #

如果需要渐变方向的阴影（比如从上到下由深变浅），可以在纹理背景上层叠加一层线性渐变：

.your-div {
  background-image: 
    /* 上层：内部渐变阴影 */
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 100%),
    /* 下层：纹理背景 */
    linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.05) 75%);
}

把所有效果组合起来，你可以用这个完整的CSS代码：

.custom-div {
  width: 300px;
  height: 200px;
  /* 多重边框 */
  border: 2px solid #ffffff;
  outline: 2px solid #2d2d2d;
  outline-offset: -4px;
  /* 纹理+渐变阴影背景 */
  background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 100%),
    linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.05) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  /* 内边距让内容和边框保持距离 */
  padding: 20px;
}

你可以根据示意图的具体样式，调整边框宽度、颜色值、纹理大小、阴影透明度这些参数，直到完全匹配你的需求。

内容的提问来源于stack exchange，提问作者Ashish Kumar