客製化網頁設計如何用 CSS 做出 SVG 的邊框魔法

2024-04-20 點擊數: 37

文章目錄

專業Google 關鍵字廣告文案寫作,專人Google廣告代操服務,展現出流量轉金流的最大化關鍵字廣告,台北Google廣告,台北Google代理商,關鍵字廣告, 台北 Google 關鍵字廣告,協助企業開通Google Ads帳戶在Google上做廣告。了解有關如何充分利用Google Ads的更多信息台北基隆GOOGLE關鍵字廣告 基隆台北網頁設計費用 台北網頁設計價格 基隆網頁設計費用

網頁設計在建立適用於 RWD 各種螢幕尺寸的 CSS 效果時，SVG 影像已成為我們最好的秘密武器之一。

在此範例中，它用於添加自動響應其容器的大小和形狀的多色動畫邊框。無論您調整元素大小多大或多小，邊框都保持不變。

textarea {
font-size: 24px;
border:10px solid black;
padding: 2rem 1rem;
min-height: 3em;
resize: both;
background: #ffd73e33;
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232d3561' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%23f3826f' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
}