标签导航：

纯css如何打造美观实用的上传按钮？

纯CSS打造美观上传按钮：告别繁琐图片和JS代码！

许多开发者都追求设计出美观易用的上传按钮。本文将演示如何仅使用CSS，就能创建一个类似上图所示的、带有虚线边框和交叉渐变线的上传区域。

关键在于巧妙运用CSS线性渐变（linear-gradient）。通过叠加两个线性渐变，即可轻松实现交叉虚线效果。

以下CSS代码实现该效果：

label {
  display: block;
  width: 80px;
  height: 80px;
  border: 1px dashed #ccc;
  background: linear-gradient(#ccc, #ccc) center/40px 4px no-repeat,
              linear-gradient(#ccc, #ccc) center/4px 40px no-repeat;
}

代码解释：

  • display: block; 将标签元素设置为块级元素。
  • width: 80px; height: 80px; 设置按钮尺寸。
  • border: 1px dashed #ccc; 创建灰色虚线边框。
  • background: 属性是核心，它使用了两个线性渐变：
    • linear-gradient(#ccc, #ccc) center/40px 4px no-repeat; 创建水平方向的短虚线。
    • linear-gradient(#ccc, #ccc) center/4px 40px no-repeat; 创建垂直方向的短虚线。 两者叠加形成交叉效果。
    • center/40px 4px 和 center/4px 40px 控制渐变线的长度、宽度、位置和重复方式。

您可以调整 width、height 和颜色值来定制按钮大小和外观。 下图展示了效果：

(此处应插入问题答案中提供的图片)

无需图片或JavaScript，仅用简洁的CSS代码，即可轻松创建美观实用的上传按钮，方便开发者修改和定制。