CSS border-color 屬性

例

設(shè)置四個邊框顏色：

{

border-style:solid;

border-color:#ff0000 #0000ff;

}

屬性定義及使用說明

border-color屬性設(shè)置一個元素的四個邊框顏色。此屬性可以有一到四個值。

實(shí)例:

border-color:紅，綠，藍(lán),粉紅色;

上邊框是紅色
右邊框是綠色
底部邊框是藍(lán)
左邊框是粉紅色

border-color：紅，綠，藍(lán);

上邊框是紅色
左，右邊框是綠色
底部邊框是藍(lán)

border-color：紅，綠;

頂部和底部邊框是紅色
左右邊框是綠色

border-color：紅色;

所有四個邊框是紅色

注意：請始終把 border-style 屬性聲明到 border-color 屬性之前。元素必須在您改變其顏色之前獲得邊框。

默認(rèn)值:	not specified
繼承:	no
版本:	CSS1
JavaScript 語法:	objectobject.style.borderColor="#FF0000 blue"

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。

屬性
border-color	1.0	4.0	1.0	1.0	3.5

屬性值

值	說明
color	指定背景顏色。在CSS顏色值查找顏色值的完整列表
transparent	指定邊框的顏色應(yīng)該是透明的。這是默認(rèn)
inherit	指定邊框的顏色，應(yīng)該從父元素繼承

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?

        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?
        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機(jī)號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機(jī)號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗(yàn)證碼</label>
    <input type="password" placeholder="請輸入驗(yàn)證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

言

在前端開發(fā)中經(jīng)常會用到很多的簡易圖形，例如三角形，箭頭，圓形等。有很多人一開始會想著用小的圖片實(shí)現(xiàn)，不過這樣會增加頁面請求次數(shù)，延緩頁面加載效果。

在CSS中有個border屬性，它完全可以達(dá)到制作各種簡易圖形的效果，今天我們就一起來看看吧。

文章中的代碼都已經(jīng)放在了github上，感興趣的同學(xué)自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html

CSS

border講解

在制作各種簡易圖形之前，我們先來看看border屬性的使用。

border是一個復(fù)合屬性。

border-width表示邊框?qū)挾取?/p>
border-style表示邊框樣式，設(shè)置實(shí)線，虛線，點(diǎn)狀等。
border-color表示邊框顏色，還可以設(shè)置transparent，表示透明。

border又分為上下左右四個方向，每個方向都占據(jù)各自的空間，不會出現(xiàn)重疊的地方，尤其是在四個方向的邊框都設(shè)置的情況下，在四個角處也不會出現(xiàn)重疊。

我們來看個最簡單的例子，在四個方向上都設(shè)置邊框，賦予不同的顏色。

圖片1

通過上面的圖片1可以看出，四個角處是分離，沒有重合的。

梯形

首先我們來看看梯形的效果圖。

梯形效果圖

我們再來分析下梯形是如何實(shí)現(xiàn)的。

因?yàn)槲覀兺耆峭ㄟ^border設(shè)置，所以這個div的高度應(yīng)該為0。
梯形的左右兩個腰，恰好如同border在角的銜接處，然后將兩側(cè)的border-style設(shè)置為transparent。

因此我們可以得到以下的CSS代碼。

梯形的CSS代碼

修改border-left和border-right的寬度值，可以改變梯形的形狀。

三角形

三角形也分為上下左右四個方向，我們首先來看看總體的形狀。

三角形

然后我們也來分析下如何實(shí)現(xiàn)這個效果，以下三角形為例。

因?yàn)槭浅尸F(xiàn)三角形的形狀，剛好契合border在角落的銜接處，因此高度和寬度都應(yīng)該為0。
下三角形是上部有區(qū)域，所以要設(shè)置border-top。
border-left和border-right兩個方向都要設(shè)置寬度，然后設(shè)置為透明即可。

因此得到以下的CSS代碼，設(shè)置不同方向border的寬度，三角形的形狀也會跟著變。

下三角形CSS代碼

同理，只要掌握了其中一個方向的三角形原理，就會輕松寫出其他方向三角形的CSS代碼。

這里直接給出上三角形的CSS代碼。

上三角形CSS代碼

左三角形的CSS代碼如下所示。

左三角形CSS代碼

右三角形的CSS代碼如下所示。

右三角形CSS代碼

正方形-四種顏色

接下來我們看一種基本的只用border設(shè)計(jì)的形狀。

圖形

它的實(shí)現(xiàn)方式也很簡單，只需要將width和height設(shè)置為0，然后將border四個方向的寬度設(shè)置成一樣的即可。

得到的代碼如下所示。

CSS代碼

直角三角形

基于上述的實(shí)現(xiàn)，我們可以得到左下，左上，右上，右下四種三角形。

首先看看基本形狀。

直角三角形

看到圖形后，我們很容易發(fā)現(xiàn)，只要隱藏掉連接的兩個方向的border，顯示出另外兩個方向的border，就可以得到直角三角形。

這里我們只展示出左上三角形的CSS代碼。

左上直角三角形CSS代碼

其他方向的直角三角形代碼可類比得出，大家可以試一下。

六角星

首先我們看看六角星的形狀。

六角星

看到這個圖形，大家應(yīng)該能想到可以由上下兩個三角形構(gòu)成，只要將上下兩個三角形位置對應(yīng)準(zhǔn)確。

這里為了節(jié)省頁面元素的空間，我們可以采用偽元素去實(shí)現(xiàn)。

將頁面顯示元素設(shè)置為上三角形。
利用:after偽元素設(shè)置下三角形。
設(shè)置偽元素的position為absolute，調(diào)節(jié)right和top值。

通過上述分析，我們得到以下CSS代碼。

六角星CSS代碼

圓形

與border屬性搭配使用的還有一個很常用的屬性，那就是border-radius。

border-radius是專門設(shè)置圓角的，可以讓90度角變?yōu)閳A角。

我們首先看看最基本的圓形的樣子。

圓形

其實(shí)我們只需要將border-radius屬性設(shè)置為寬或者高的一半以上即可。代碼如下所示。

圓形

同心圓

我們來看看同心圓的樣子。

同心圓

同心圓只需要設(shè)置一個border邊框，給border設(shè)置一個特殊的背景色，給div設(shè)置成白色背景即可。

同心圓CSS代碼

半圓

我們來看看半圓的形狀。

半圓

半圓的效果是如何實(shí)現(xiàn)的呢？

首先元素自身高度設(shè)置為0，設(shè)定寬度值。
設(shè)定上部和右部的border。
設(shè)定左上角和右上角的border-radius值。

得到的代碼如下所示。

上半圓

同理，下半圓，左半圓和右半圓修改對應(yīng)的值就可以獲得。

結(jié)束語

今天這篇文章主要通過border屬性，畫出了一系列簡易的圖形，這在實(shí)際中是很實(shí)用的，大家學(xué)會了嗎?

在線咨詢

上一篇：JAVA實(shí)現(xiàn)生成多層JSON格式數(shù)據(jù)（含源碼-三層樣
下一篇：教育網(wǎng)站官宣免費(fèi)，親測后發(fā)現(xiàn)這10個在國內(nèi)秒打開

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

CSS border-color 屬性

言

border講解

梯形

三角形

正方形-四種顏色

直角三角形

六角星

圓形

同心圓

半圓

結(jié)束語

您的項(xiàng)目需求