您好,登錄后才能下訂單哦!
本篇內容介紹了“怎么利用CSS中linear制作復雜的邊框效果”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!
網上看到一種利用linear-gradient屬性制作絢麗邊框效果的方法。首先給出代碼,大家可以在自己的電腦中查看效果:
XML/HTML Code復制內容到剪貼板
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box {
margin: 80px 30px;
width: 200px;
height: 200px;
position: relative;
background: #fff;
float: left;
}
.box:before {
content: '';
z-index: -1;
position: absolute;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
}
.first:before {
background-image: linear-gradient(90deg, yellow, gold);
}
.second:before {
background-image: linear-gradient(0deg, orange, red);
}
.third:before {
background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);
}
</style>
</head>
<body>
<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>
</body>
</html>
有代碼可以看出,其實我們并沒有使用border,那么這種邊框效果是怎么實現的呢?
總體思路是,我們先定義一個白色的div,在定義一個白色方塊大一圈的帶顏色的div。兩個重疊一下,并且讓白色的div覆蓋彩色div,就實現了邊框的效果。
這里面用到的css知識點很多。
1、:before偽類
通過上面的代碼我們看出,其實我們在定義的白色div中定義了一個:before偽類,把彩色方塊所有的樣式都放在了這里。這是因為使用:before定義可以使得定位更加方便,只要調整top和left為邊框的寬度就可以了。同時也是的二者成為一個整體。
2、linear-gradient
現在很多瀏覽器都支持這個css方法。該方法有以下三種使用模式:
①background:linear-gradient(top,#fff,#000)
這段代碼的意思是,從上部開始為白色,到底部為黑色進行過度。
②background:linear-gradient(top,right,#fff,#000)
這段代碼關于位置傳遞了兩個參數,top和right,表示從右上放開始,到左下方變化,其他道理與第一個相同。
③background:linear-gradient(30deg,#fff,#000)
這段代碼的第一個參數傳遞的是角度,其實道理和位置是一樣的,只是不是從標準的位置開始變化了。那么角度和位置的對應關系是什么呢?根據實驗,0度對應bottom,90度對應left,180度對應top,360度對應right。
“怎么利用CSS中linear制作復雜的邊框效果”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。