css边框渐变
在實際開發中，我們經常遇見邊框需要背景漸變的實現要求，那么如何去實現呢，今天給大家分享依稀幾種情況
1.直角的背景漸變
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>border漸變</title><style> button{background:transparent;color:#23b7cb;font-size:15px;padding:5px 15px;border:1px transparent solid;border-image:linear-gradient(to right,#000718,#23b7cb) 1 10;}</style> </head> <body><button>進入平臺</button> </body> </html></pre>注意問題：border-image的使用是不能實現圓角的效果，各位需要注意這個屬性
2.圓角的背景漸變
代碼如下：利用偽類元素去實現背景邊的漸變效果，同時我們還可以加上動畫效果，利用的是transtion:all ease 300ms即可，主要使用了
linear-gradient這個屬性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>border漸變</title><style> button{color: #23b7cb;font-size: 15px;padding: 5px 15px;background: #fff;border: 1px transparent solid;border-radius: 30px;position: relative;}button:after{content:'';position: absolute;top: -3px; bottom: -3px;left: -3px; right: -3px;background: linear-gradient(135deg,#000781, #23b7cb);border-radius: 30px;content: '';z-index: -1;}</style> </head> <body><button>進入平臺</button> </body> </html>3. 下邊框漸變
或者 分割線 的邊框漸變
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>border漸變</title><style> div{width:200px;padding-bottom: 15px;background:transparent;/*color:#23b7cb;*/ font-size:15px;padding:5px 15px;border-bottom:3px transparent solid;border-image:linear-gradient(to right,#000718,#23b7cb) 1 10;}</style> </head> <body><div>下邊框漸變</div> </body> </html></pre>
最后，給大家推薦一個前端學習進階內推交流群685910553（前端資料分享），不管你在地球哪個方位，
不管你參加工作幾年都歡迎你的入駐！（群內會定期免費提供一些群主收藏的免費學習書籍資料以及整理好的面試題和答案文檔！）
如果您對這個文章有任何異議，那么請在文章評論處寫上你的評論。
如果您覺得這個文章有意思，那么請分享并轉發，或者也可以關注一下表示您對我們文章的認可與鼓勵。
愿大家都能在編程這條路，越走越遠。
總結
- 上一篇： day03-实训在线授课笔记
- 下一篇： debian 开发版 移植_Debian