CSS border（邊框）樣式寫法總結(jié)

border屬性 ：在網(wǎng)頁中設置元素的邊框樣式。可同時設置邊框?qū)挾取⑦吙驑邮健⑦吙蝾伾Ｒ部梢詥为氃O置上邊、右邊、下邊、左邊的邊框。

創(chuàng)新互聯(lián)公司十載專注成都高端網(wǎng)站建設按需搭建網(wǎng)站服務,為客戶提供專業(yè)的成都網(wǎng)站制作,成都網(wǎng)頁設計,成都網(wǎng)站設計服務;創(chuàng)新互聯(lián)公司服務內(nèi)容包含成都網(wǎng)站建設,微信平臺小程序開發(fā),軟件開發(fā),網(wǎng)絡營銷推廣,網(wǎng)絡運營服務及企業(yè)形象設計;創(chuàng)新互聯(lián)公司擁有眾多專業(yè)的高端網(wǎng)站制作開發(fā)團隊,資深的高端網(wǎng)頁設計團隊及經(jīng)驗豐富的架構(gòu)師高端網(wǎng)站策劃團隊;我們始終堅持從客戶的角度出發(fā),為客戶量身訂造網(wǎng)絡營銷方案，解決網(wǎng)絡營銷疑問。

語法：border： border-width | border-style | border-color;

border-width ：邊框?qū)挾取？梢灾付ㄩL度值。如1px，1em（單位為px，pt，em等）。或者使用關鍵字medium（默認），thick，thin。

?border-top-width：設置元素上邊框?qū)挾?/p>

?border-right-width：設置元素右邊框?qū)挾?/p>

?border-bottom-width：設置元素下邊框?qū)挾?/p>

?border-left-width：設置元素左邊框?qū)挾?/p>

border-style ：邊框樣式。

?border-top-style：設置元素上邊框樣式

?border-right-style：設置元素右邊框樣式

?border-bottom-style：設置元素下邊框樣式

?border-left-style：設置元素左邊框樣式

?屬性值有：

??none：無邊框。

??hidden：隱藏邊框。對于表，hidden 用于解決邊框沖突。

??dotted：點狀邊框。

??dashed：虛線邊框。

??solid：實線邊框。

??double：雙線邊框。兩條單線與其間隔的和等于指定的border-width值。

??groove：3D凹槽邊框。

??ridge：3D壟狀邊框。

??inset：凹邊框。

??outset：凸邊框。

border-color ：邊框顏色。

1.1 邊框各樣式效果圖

1.2 四條邊顏色樣式相同

1.3 四條邊顏色不同，樣式相同

1.4 四條邊顏色相同，樣式不同

1.5 設置上邊框?qū)挾取邮健㈩伾?/p>

1.6 設置右邊框?qū)挾取邮健㈩伾?/p>

1.7 設置下邊框?qū)挾取邮健㈩伾?/p>

1.8 設置左邊框?qū)挾取邮健㈩伾?/p>

以上對border邊框?qū)傩赃M行了基礎操作，大家可以根據(jù)自己的經(jīng)驗為邊框制作出更漂亮的樣式。如若大家有什么更好的見解，那就在回復區(qū)暢所欲言吧，我定會吸取精華~如有寫錯歡迎大家回復，我以后定會更加細心 _

什么是css邊框

元素的邊框(border)是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線.

css border屬性允許你規(guī)定元素邊框的樣式，寬度和顏色.

css邊框:在html中，我們使用表格來創(chuàng)建文本周圍的邊框，但是 通過使用css邊框?qū)傩裕?/p>

我們可以創(chuàng)建出效果出色的邊框，并且可以應用于任何元素,

元素外邊距內(nèi)就是元素的邊框(border),元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線.每個邊框有3個方面:寬度、樣式/以及顏色。

css屬性有哪些

css屬性有：字體屬性（font）、背景屬性（background）、區(qū)塊屬性（block）、方框?qū)傩裕╞ox）、邊框?qū)傩裕╞order）、列表屬性（list-style）、定位屬性（position）等。

【css】邊框border的屬性和使用方法

顧名思義，就是元素外面的一圈邊框，下圖中虛線圈起的部分是內(nèi)容，外面橙色的一圈是它的邊框，可以理解成在照片外面加一個相框，使用border屬性。

邊框樣式border-style必須寫！否則其它屬性全部失效。

邊框的樣式：

border后面可跟多個值，中間用空格分離，含義如下：

注意順序， 邊框樣式不可省略 ，顏色和寬度可以省略，會顯示默認的效果。

——以上規(guī)律在padding和margin一樣適用。

邊框樣式border-style必須設置

如果我們的四條邊框?qū)傩远际且粯拥模敲唇y(tǒng)一設置就可以啦，注意邊框類型不可省略。

首先我們放置一個寬高為200px的粉色盒子。

接下來我們?yōu)樗由弦粭l寬度為10px，樣式為實線，顏色為紅色的邊框。

我們可以看到，添加邊框的時候，是在盒子外面套一圈邊框，而不是加在里面，在Chrome瀏覽器中點擊右鍵檢查，可以看到div的大小變成了220x220。

套在外面的邊框的寬度是會加進盒子尺寸的（上下左右各增加了10px），如果我們想盒子保持大小不變，要對div本身的width和height進行減小，在這個樣例中，通過計算可得，減少到180px即可保持大小不變。

當我們使用點狀、虛線等邊框樣式時，多出來的縫隙，會使用元素本身的 背景顏色 填充。

點和虛線的具體樣式，不同瀏覽器中可能會不一樣。

我們?yōu)閯倓偟暮凶釉O置上邊框為紅色，左邊框為綠色，效果如下圖所示：

我們會發(fā)現(xiàn)在兩條邊框交界處的小方塊，通過一條對角線分隔，上邊框和左邊框各占一半。當邊框不一樣寬時，同樣也是用對角線把交界處的小長方形一分為二，如下圖所示：

當被添加邊框的元素寬度為0，不設置高度（高度默認是0）的情況下，我們可以巧妙利用 邊框組合 和 transparent（透明） 繪制三角形，可以體驗下哦。

三角形1-css：

三角形2-css：

多彩三角形-css：

繪制梯形只要對應添加寬度或者高度就可以啦

梯形1-css：

梯形2-css：

當前文章：css邊框樣式屬性有哪些,css邊框樣式屬性有哪些種類
當前地址：http://chinadenli.net/article24/dsehgje.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、商城網(wǎng)站、服務器托管、電子商務、網(wǎng)站排名、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)