利用CSS中linear製作複雜的邊框效果實例分析-css教學-PHP中文網

首頁

web前端

css教學

利用CSS中linear製作複雜的邊框效果實例分析

高洛峰

Mar 13, 2017 pm 05:35 PM

css邊框

這篇文章主要介紹了利用CSS中linear製作複雜的邊框效果實例分析的相關資料，利用linear-gradient屬性製作絢麗的邊框效果

網上看到一種利用linear-gradient屬性製作絢麗邊框效果的方法。先給程式碼，大家可以在自己的電腦中看效果：

利用CSS中linear製作複雜的邊框效果實例分析

<!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: &#39;&#39;;     
                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>
    <p class="box first"></p>
    <p class="box second"></p>
    <p class="box third"></p>
</body>
</html>

有程式碼可以看出，其實我們並沒有使用border，那麼這種邊框效果是怎麼達成的呢？
整體思路是，我們先定義一個白色的p，在定義一個白色方塊大一圈的帶顏色的p。兩個重疊一下，並且讓白色的p覆蓋彩色p，就實現了邊框的效果。
這裡面用到的css知識點很多。

1、:before偽類別

#透過上面的程式碼我們看出，其實我們在定義的白色p中定義了一個: 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。

以上就是利用linear方法實現絢麗邊框的程式碼和解釋，大家可以在本地進行實現，以此發現更多新奇的組合實現方法。

以上是利用CSS中linear製作複雜的邊框效果實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn