做了个渐变边框的input输入框，领导和客户很满意！

正文

请到「今天看啥」查看全文

是一个用于控制背景（ background ）绘制范围的 CSS 属性。它决定了背景是绘制在 「内容区域」 、 「内边距区域」 、还是 「边框区域」 。

background-clip: border-box | padding-box | content-box | text;

代码实现

背景渐变

 

  







/* 输入框容器 */
.input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: #f4f4f9;
}

/* 渐变边框输入框 */
.gradient-input {
  width: 400px;
  height: 40px;
  padding: 5px 12px;
  font-size: 16px;
  color: #333;
  outline: none;
  /* 渐变边框 */
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(45deg, #ff7eb3, #65d9ff, #c7f464, #ff7eb3) border-box;
  border-radius: 20px;
}

/* Placeholder 样式 */
.gradient-input::placeholder {
  color: #aaa;
  font-style: italic;
}

通过上面的 css 方法，我们成功实现了一个带有渐变效果边框的 Input 输入框，它的核心代码是

background: linear-gradient(white, white) padding-box, 
          linear-gradient(45deg, #ff7eb3, #65d9ff, #c7f464, #ff7eb3) border-box;

padding-box ：限制背景在内容区域显示，防止覆盖输入框内容。

border-box ：渐变背景会显示在边框位置，形成渐变边框效果。

这段代码分为两层背景：

1. 「第一层背景」 ：
   linear-gradient(white, white) 是一个纯白色的线性渐变，用于覆盖输入框的内容区域（ padding-box

请到「今天看啥」查看全文