當(dāng)我們開發(fā)網(wǎng)站時(shí)，時(shí)常會涉及到顏色的使用。如果一個(gè)網(wǎng)站使用過多的顏色會造成視覺的不集中，會降低用戶的體驗(yàn)感。如果想要讓頁面不過于單調(diào)，就可以進(jìn)行合理使用漸變色，會增強(qiáng)頁面的程度感。那么我們用CSS 如何給邊框加上漸變呢？這篇文章 W3Cschool 小編告訴你。
實(shí)現(xiàn)效果：
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>W3Cschool-編程獅</title>
<style>
div{
width:200px;
height: 80px;
background:transparent;
margin-top: 50px;
margin-left: 100px;
border:3px transparent solid;
border-image:linear-gradient(to right,#FF0033,#FFCCCC) 1 10;/*linear-gradient() 用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上就是 CSS 如何給邊框加上漸變的代碼。漸變在前端開發(fā)中的應(yīng)用還有很多，比如字體漸變，背景漸變等，可以利用漸變做出好看又酷炫的頁面，此處就不在過多敘述。同學(xué)們可以自行練習(xí)加強(qiáng)鞏固。
