渐变边框的input输入框

            
             <div class="input-container">
  <input type="text" placeholder="请输入内容" class="gradient-input" />
</div>
        

            
            /* 输入框容器 */
.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;
  font-family: 'Arial', sans-serif;
  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;

  /* 平滑过渡 */
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* 

/* Hover 状态 */
.gradient-input:hover {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #ff0076, #1eaeff, #28ffbf, #ff0076) border-box;
  box-shadow: 0 0 5px rgba(255, 0, 118, 0.5), 0 0 20px rgba(30, 174, 255, 0.5);
}

/* Focus 状态 */
.gradient-input:focus {
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(45deg, #ff0076, #1eaeff, #28ffbf, #ff0076) border-box;
  box-shadow: 0 0 15px rgba(255, 0, 118, 0.7), 0 0 25px rgba(30, 174, 255, 0.7);
  color: #000; /* 聚焦时文本颜色 */
}

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

            
            // 示例代码
import { ref } from "vue"

const title = ref("Hello 笔.COOL");
const descr = ref("一笔一划，绘就人生；一码一境，酷创未来。");