丰满人妻中伦妇伦精品app,国产免费黄色av,亚洲天堂第一区

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

很多時候在開發網頁的時候，可能因為一些原因需要為邊框設置顏色漸變，那么該如何設置顏色邊框漸變？本篇文章將為大家介紹使用css3設置邊框顏色漸變的方法。

我們設置邊框顏色漸變時可以用到css3中的屬性是border-image或者border-colorcss3邊框顏色漸變，那么兩個屬性如何設置邊框顏色漸變。

我們首先來看border-image屬性實現的簡單css3邊框顏色漸變的例子：

第一種：border-image設置邊框顏色漸變示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            border:10px solid #ddd;
            border-image: -webkit-linear-gradient(#F80, #2ED) 20 20;
            border-image: -moz-linear-gradient(#F80, #2ED) 20 20;
            border-image: -o-linear-gradient(#F80, #2ED) 20 20;
            border-image: linear-gradient(#F80, #2ED) 20 20;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

css3邊框顏色漸變效果如下：

2345截圖20180912102928.png

說明：上述代碼中你會發現給border-image加了linear-gradient，這是為什么呢？因為若是你不加linear-gradient就不會有線性漸變的效果。（關于border-image有很多的用法，你可以參考css手冊。）

看完了border-image屬性實現的邊框顏色漸變的例子，我們來看一下border-color屬性實現邊框顏色漸變的例子。

第二種：border-color設置邊框顏色漸變示例

border-color屬性為我們提供了同一條邊框設置多種顏色，但是目前為止只有Firefox 3.0+的瀏覽支持這個屬性。所以運用或測試時我們需要加上-moz-前綴。

我們來看一下用法：

.box{
    border：5px solid transparent;
    -moz-border-top-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-right-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-bottom-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-left-colors：<color1> <color2> <color3> <color4> <color5>;
}

我們這時給每一條邊框都設置了5種顏色，且都占據著5px的寬度。這個時候每種顏色的border-width為1px。事實上，如果我們邊框設置了x個像素的寬度，并且為每條邊框設置了y種顏色，若x>y，則前y-1種顏色每種占據了1px，最后一種顏色占據x-y+1個像素。

我們來看一個css3邊框顏色漸變的實例：立體漸變效果

.box {
    width: 200px;
    height: 100px;
    border: 10px solid transparent;
    border-radius: 15px 0 15px 0;
    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
  }

效果如下：

2345截圖20180912105219.png

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

css3如何設置邊框顏色漸變？css3邊框顏色漸變的2種完成方法

本類教程下載

系統下載排行