如何利用CSS3的線性漸變linear-gradient製作邊框-css教學-PHP中文網

首頁

web前端

css教學

如何利用CSS3的線性漸變linear-gradient製作邊框

不言

Jun 09, 2018 pm 03:56 PM

css3 linear-gradient 邊框

這篇文章主要介紹了關於如何利用CSS3的線性漸變linear-gradient製作邊框，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

linear-gradient線條用來製作邊框還是比較給力的,尤其是利用其描邊可以製作一些複製的邊框效果,這裡我們就來看一下利用CSS3的線性漸變linear-gradient製作邊框的示例

一般的app邊框描邊的線都小於一像素，那麼我就像往常一樣直接描了1px的邊框，雖然是1px可是結果和app裡的描邊完全不一樣“粗了”，所以就在網找了一下看看有沒有解決方法，可是找了一會兒沒找到，那咋辦，需求方不願意不要這麼粗，那就只能自己解決了。
所以用上一個方法聯想到了線性漸變（linear-gradient）

CSS

.line li{  border: none;   
  background-image: -webkit-linear-gradient(#222 50%,transparent 50%);   
  background-image: -moz-linear-gradient(#222 50%,transparent 50%);   
  background-image: -o-linear-gradient(#222 50%,transparent 50%);   
  background-image: linear-gradient(#222 50%,transparent 50%);   
  background-size:  100% 1px;   
  background-repeat: no-repeat;   
  background-position: bottombottom;}

登入後複製

XML/HTML

<ul class="line">
    <li>linear-gradient</li>
    <li>linear-gradient</li>
    <li>linear-gradient</li>
</ul>OK，又出来了，但还是有点瑕疵，那么问题来了，就是改变描边位置（left，top，right，bottom）需要修改参数

登入後複製

如left描邊需要改變：

CSS

background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);   
background-size:  1px 100%;   
background-position: left;

登入後複製

具體的都不一一列出了。

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

CSS

<!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方法實現絢麗邊框的程式碼和解釋，大家可以在本地進行實現，以此發現更多新奇的組合實現方法。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1665

CakePHP 教程

1424

Laravel 教程

1322

PHP教程

1270

C# 教程

1249

Related knowledge

Windows 11 上調整視窗邊框設定的方法：變更顏色和大小 Sep 22, 2023 am 11:37 AM

Windows11將清新優雅的設計帶到了最前沿;現代介面可讓您個性化和更改最精細的細節，例如視窗邊框。在本指南中，我們將討論逐步說明，以協助您在Windows作業系統中建立反映您的風格的環境。如何更改視窗邊框設定？按+開啟“設定”應用程式。 WindowsI前往個人化，然後按一下顏色設定。顏色變更視窗邊框設定視窗11「寬度=」643「高度=」500「>找到在標題列和視窗邊框上顯示強調色選項，然後切換它旁邊的開關。若要在「開始」功能表和工作列上顯示主題色，請開啟「在開始」功能表和工作列上顯示主題

純CSS3怎麼實現波浪效果？（程式碼範例） Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！

巧用CSS實現各種奇形怪狀按鈕（附代碼） Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕，希望對大家有幫助！

css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

兩種方法：1、利用display屬性，只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素，只需為元素加上「position:absolute;top:-9999px;」樣式。

css3怎麼實現花邊邊框 Sep 16, 2022 pm 07:11 PM

在css中，可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。

excel邊框設定方法科普 Mar 20, 2024 am 10:30 AM

Excel出現在我們日常工作和生活中已經不是一件罕見的事情了，無論是員工資訊、薪資表的製作或是學生入學資訊和成績單的製作，Excel都是一款比較好用的工具。當要列印Excel的時候需要設定邊框來實現列印需求。本文小編為大家科普幾個Excel邊框設定方法。方法1、利用功能選項卡按鈕，這應該是大家常用的方法，方便快捷，具體操作：選取需要新增邊框的儲存格區域B2：H10，依序點選【開始】選項卡-【邊框】右側下拉按鈕-【所有框線】，完成新增框線。方法2、選取需要新增邊框的儲存格區域B2：H10