客制化网页设计如何用 CSS 做出 SVG 的边框魔法
点击数: 338
专业Google 关键字广告文案写作,专人Google广告代操服务,展现出流量转金流的最大化关键字广告,台北Google广告,台北Google代理商,关键字广告, 台北 Google 关键字广告,协助企业开通Google Ads帐户在Google上做广告。了解有关如何充分利用Google Ads的更多信息台北基隆GOOGLE关键字广告基隆台北网页设计费用台北网页设计价格基隆网页设计费用
网页设计在建立适用于 RWD 各种萤幕尺寸的 CSS 效果时，SVG 影像已成为我们最好的秘密武器之一。
在此范例中，它用于添加自动响应其容器的大小和形状的多色动画边框。无论您调整元素大小多大或多小，边框都保持不变。
CSS 代码
- 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;
- }
