整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          CSS border-color 屬性

          CSS border-color 屬性

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

          p

          {

          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-color1.04.01.01.03.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é)會了嗎?


          主站蜘蛛池模板: 亚洲AV成人一区二区三区观看 | 国产成人无码精品一区在线观看| 一区二区三区国产精品| 一区二区三区四区视频在线| 中文字幕在线观看一区| 中文字幕一区二区人妻性色| 日本精品高清一区二区| 精品无码日韩一区二区三区不卡| 亚洲国产精品无码第一区二区三区| 日本一区二区三区免费高清| 波多野结衣中文字幕一区二区三区| 精品亚洲一区二区三区在线播放| 亚洲日韩国产精品第一页一区| 亚洲国产一区二区三区青草影视 | 无码av中文一区二区三区桃花岛| 日本一区二区三区免费高清在线| 亚洲一区爱区精品无码| 亚洲大尺度无码无码专线一区| 精品一区精品二区| 色狠狠AV一区二区三区| 国产婷婷色一区二区三区深爱网| 中文字幕无码一区二区免费| 国产91精品一区二区麻豆网站| 日韩高清一区二区| 久久一区不卡中文字幕| 国产在线观看一区二区三区四区| 国产在线精品一区二区在线观看| 在线电影一区二区| 亚洲国产精品自在线一区二区| 白丝爆浆18禁一区二区三区 | 久久精品亚洲一区二区三区浴池| 国产精品日韩欧美一区二区三区| 国产成人精品无码一区二区三区| 欧美日韩一区二区成人午夜电影| 亚洲一区二区三区影院| 无码人妻AⅤ一区二区三区水密桃 无码欧精品亚洲日韩一区夜夜嗨 无码毛片一区二区三区中文字幕 无码毛片一区二区三区视频免费播放 | 日亚毛片免费乱码不卡一区| 无码欧精品亚洲日韩一区| 亚洲高清成人一区二区三区| 一区二区和激情视频| 国产一区二区电影|