可以對輸入邊框應用線性漸變顏色嗎？ 我嘗試了以下方法:

input{
    border: 5pt solid linear-gradient(rgba(0, 25, 50, 0.5), rgba(0, 0, 25, 0.5));
}

上面代碼的問題是你不能使用線性漸變作為顏色。只是澄清一下，我不想改變輸入背景色，只改變邊框顏色。

JSFIDDLE: http://jsfiddle.net/o1yhod9t/

# # #您不能直接向border屬性添加漸變，因為第三個參數只接受顏色。相反，您必須使用border-image屬性，如下面的代碼片段所示。

請注意，目前瀏覽器對該屬性的支持非常低。為了更好的瀏覽器支持，同樣可以使用背景圖像屬性來模仿。

input {
  border-image-source: linear-gradient(rgba(0, 51, 102, 0.5), rgba(0, 0, 51, 0.5));
  border-width: 5pt;
  border-image-slice: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="text" />

# # #我看到原答案沒有提供設置邊框半徑的方法。您可以通過深奧的CSS元素的怪異組合來實現這一點:

input {
  padding: 0.5rem;
  border: double 3px transparent;
  border-radius: 6px;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to right, orange, yellow);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

這有效地創造了分層梯度。內心的那個 (適合元素的位)只是白色的，所以它 似乎沒什么不尋常的。然后在那周圍，你加上 你想要的實際梯度(這可以是復雜的或簡單的 你喜歡)。

最后，你設置一個透明的邊界(與相關的邊界半徑 獲得您的彎曲的角落)，然后剪輯背景 相關領域。第一個背景(白色的)被剪輯到 填充框，這意味著它占據了內容的所有空間

填充。然后，第二個背景(我們希望作為邊框的背景)被剪切到邊框本身的邊緣。 所以我們的梯度被另一個，白色，有效地掩蓋了 背景，除了邊界。因此，您可以調整大小 邊框的任意粗細，漸變會 裝滿它。

原始來源:https://theadhocracy . co . uk/written/gradient-borders-with-rounded-corners-on-input-fields

# # #我用的是tailwind，參考:https://blog . log rocket . com/guide-adding-gradients-tail wind-CSS/# input-border-gradient

<div class=" h-12 w-full p-0.5 rounded-lg mt-1.5 bg-gradient-to-r from-purple-400 via-pink-600 to-indigo-500">
            <input
              class="p-2 h-full w-full rounded-lg focus:outline-none"
              type="text"
              placeholder="Enter movie/show"
            />
          </div>