利用CSS中l(wèi)inear制作復(fù)雜的邊框效果
我要評(píng)論網(wǎng)上看到一種利用linear-gradient屬性制作絢麗邊框效果的方法。首先給出代碼，大家可以在自己的電腦中查看效果：
- <!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>
有代碼可以看出，其實(shí)我們并沒有使用border，那么這種邊框效果是怎么實(shí)現(xiàn)的呢？
總體思路是，我們先定義一個(gè)白色的div，在定義一個(gè)白色方塊大一圈的帶顏色的div。兩個(gè)重疊一下，并且讓白色的div覆蓋彩色div，就實(shí)現(xiàn)了邊框的效果。
這里面用到的css知識(shí)點(diǎn)很多。
1、:before偽類
通過上面的代碼我們看出，其實(shí)我們?cè)诙x的白色div中定義了一個(gè):before偽類，把彩色方塊所有的樣式都放在了這里。這是因?yàn)槭褂?before定義可以使得定位更加方便，只要調(diào)整top和left為邊框的寬度就可以了。同時(shí)也是的二者成為一個(gè)整體。
2、linear-gradient
現(xiàn)在很多瀏覽器都支持這個(gè)css方法。該方法有以下三種使用模式：
①background:linear-gradient(top,#fff,#000)
這段代碼的意思是，從上部開始為白色，到底部為黑色進(jìn)行過度。
②background:linear-gradient(top,right,#fff,#000)
這段代碼關(guān)于位置傳遞了兩個(gè)參數(shù)，top和right，表示從右上放開始，到左下方變化，其他道理與第一個(gè)相同。
③background:linear-gradient(30deg,#fff,#000)
這段代碼的第一個(gè)參數(shù)傳遞的是角度，其實(shí)道理和位置是一樣的，只是不是從標(biāo)準(zhǔn)的位置開始變化了。那么角度和位置的對(duì)應(yīng)關(guān)系是什么呢？根據(jù)實(shí)驗(yàn)，0度對(duì)應(yīng)bottom，90度對(duì)應(yīng)left，180度對(duì)應(yīng)top，360度對(duì)應(yīng)right。
以上就是利用linear方法實(shí)現(xiàn)絢麗邊框的代碼和解釋，大家可以在本地進(jìn)行實(shí)現(xiàn)，以此發(fā)現(xiàn)更多新奇的組合實(shí)現(xiàn)方法。
相關(guān)文章
CSS3實(shí)現(xiàn)超酷的黑貓警長(zhǎng)首頁
這篇文章主要為大家介紹了CSS3實(shí)現(xiàn)超酷的黑貓警長(zhǎng)首頁的相關(guān)代碼，效果酷炫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-26CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)
這篇文章主要介紹了CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-04-26- 這篇文章主要以模擬漸變色條實(shí)例，針對(duì)CSS3 HSLA色彩模式進(jìn)行介紹，使用HSLA色彩模式，可以設(shè)計(jì)不同的透明效果，感興趣的小伙伴們可以參考一下2016-04-26
- 這篇文章主要以設(shè)計(jì)帶有陰影邊框的表單為例，為大家介紹了CSS3 RGBA色彩模式使用方法，感興趣的小伙伴們可以參考一下2016-04-26
- 這篇文章主要為大家詳細(xì)介紹了CSS3不透明度實(shí)例，以設(shè)計(jì)燈箱廣告背景布的透明度為例，為大家介紹CSS3不透明度的調(diào)節(jié)方法，感興趣的小伙伴們可以參考一下2016-04-26
- CSS3色彩模式有哪些？這篇文章主要介紹了CSS3色彩模式是什么？告訴大家HSL色彩模式的定義、語法，感興趣的小伙伴們可以參考一下2016-04-26
- 這篇文章主要針對(duì)CSS定位position的常用技法進(jìn)行探究，CSS中的position等屬性確實(shí)有很多需要認(rèn)真考究的地方，本文就和大家一起探索一下2016-04-26
- 半透明的邊框如何實(shí)現(xiàn)？多重邊框如何實(shí)現(xiàn)？這篇文章就是主要針對(duì)CSS邊框特效實(shí)現(xiàn)技巧進(jìn)行探究，感興趣的小伙伴們可以參考一下2016-04-26
CSS實(shí)現(xiàn)彈簧效果的旋轉(zhuǎn)加載動(dòng)畫
這篇文章主要介紹了CSS實(shí)現(xiàn)彈簧效果的旋轉(zhuǎn)加載動(dòng)畫的相關(guān)資料，像是彈簧在不斷伸縮，顯示加載進(jìn)度，感興趣的小伙伴們可以參考一下2016-04-25CSS實(shí)現(xiàn)大小相同、顏色深淺不一的粒子旋轉(zhuǎn)加載動(dòng)畫
這篇文章主要介紹了CSS實(shí)現(xiàn)大小相同、顏色深淺不一的粒子旋轉(zhuǎn)加載動(dòng)畫的相關(guān)代碼，運(yùn)用CSS3的border-radius圓角屬性、box-shadow陰影屬性等屬性制作出來的，感興趣的小伙伴2016-04-25