從屌絲到架構(gòu)師的飛越（CSS篇）-CSS邊框

一、介紹

元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線列荔，CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色枚尼。

在 HTML 中贴浙，我們使用表格來創(chuàng)建文本周圍的邊框，但是通過使用 CSS 邊框?qū)傩怨迷覀兛梢詣?chuàng)建出效果出色的邊框悬而，并且可以應(yīng)用于任何元素。元素外邊距內(nèi)就是元素的的邊框 (border)锭汛。元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊據(jù)的一條或多條線。

二袭蝗、知識點介紹

1唤殴、CSS邊框

2、CSS上邊框

3到腥、CSS右邊框

4朵逝、CSS下邊框

5、CSS左邊框

6乡范、CSS輪廓

三配名、上課對應(yīng)視頻的說明文檔

1、CSS邊框

邊框語法：

border:border-width,border-style,border-color

1.1晋辆、border-width:值? 元素的所有邊框設(shè)置寬度渠脉，或者單獨地為各邊邊框設(shè)置寬度

實例：

<html>

<head>

p.one

{

border-style: solid;

border-width: 5px

}

p.two

{

border-style: solid;

border-width: thick

}

p.three

{

border-style: solid;

border-width: 5px 10px

}

p.four

{

border-style: solid;

border-width: 5px 10px 1px

}

p.five

{

border-style: solid;

border-width: 5px 10px 1px medium

}

</style>

</head>

<body>

<p><b>注釋：</b>"border-width" 屬性如果單獨使用的話是不會起作用的。請首先使用 "border-style" 屬性來設(shè)置邊框瓶佳。</p>

</body>

</html>

1.2芋膘、border-style ：值? ? 用于設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式

實例：

<html>

<head>

p.dotted {border-style: dotted}

p.dashed {border-style: dashed}

p.solid {border-style: solid}

p.double {border-style: double}

p.groove {border-style: groove}

p.ridge {border-style: ridge}

p.inset {border-style: inset}

p.outset {border-style: outset}

</style>

</head>

<body>

<p class="dotted">A dotted border</p>

<p class="dashed">A dashed border</p>

<p class="solid">A solid border</p>

<p class="double">A double border</p>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>

</body>

</html>

1.3、border-color ：值? 設(shè)置四條邊框的顏色

實例：

<html>

<head>

p.one

{

border-style: solid;

border-color: #0000ff

}

p.two

{

border-style: solid;

border-color: #ff0000 #0000ff

}

p.three

{

border-style: solid;

border-color: #ff0000 #00ff00 #0000ff

}

p.four

{

border-style: solid;

border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)

}

</style>

</head>

<body>

<p class="one">One-colored border!</p>

<p class="two">Two-colored border!</p>

<p class="three">Three-colored border!</p>

<p class="four">Four-colored border!</p>

<p><b>注釋：</b>"border-width" 屬性如果單獨使用的話是不會起作用的为朋。請首先使用 "border-style" 屬性來設(shè)置邊框臂拓。</p>

</body>

</html>

1.4、border：值? 屬性在一個聲明設(shè)置所有的邊框?qū)傩?/p>

border:5px solid red;

實例：

<html>

<head>

{

border: medium double rgb(250,0,255)

}

</style>

</head>

<body>

</body>

</html>

2习寸、CSS上邊框

border-top ：值? 上邊框的所有屬性設(shè)置到一個聲明中

border-top:thick double #ff0000;

border-top-style

border-top-width

border-top-color

實例：

<html>

<head>

{

border-style:solid;

border-top:thick double #ff0000;

}

</style>

</head>

<body>

<p>This is some text in a paragraph.</p>

</body>

</html>

3胶惰、CSS右邊框

border-right ：值? 右邊框的所有屬性設(shè)置到一個聲明中

border-right:thick double #ff0000;

border-right-width

border-right-style

border-right-color

實例：

<html>

<head>

{

border-style:solid;

border-right:thick double #ff0000;

}

</style>

</head>

<body>

<p>This is some text in a paragraph.</p>

</body>

</html>

4、CSS下邊框

border-bottom：值下邊框的所有屬性設(shè)置到一個聲明中

border-bottom:thick dotted #ff0000;

border-bottom-width

border-bottom-style

border-bottom-color

實例：

<html>

<head>

{

border-style:solid;

border-bottom:thick dotted #ff0000;

}

</style>

</head>

<body>

<p>This is some text in a paragraph.</p>

</body>

</html>

5霞溪、CSS左邊框

border-left ：值? 左邊框的所有屬性設(shè)置到一個聲明中

border-left:thick double #ff0000;

border-left-width

border-left-style

border-left-color

實例：

<html>

<head>

{

border-style:solid;

border-left:thick double #ff0000;

}

</style>

</head>

<body>

<p>This is some text in a paragraph.</p>

</body>

</html>

6孵滞、CSS輪廓

outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍威鹿，可起到突出元素的作用

6.1剃斧、outline-width 屬性設(shè)置元素整個輪廓的寬度，只有當輪廓樣式不是 none 時忽你，這個寬度才會起作用幼东。如果樣式為 none，寬度實際上會重置為 0科雳。不允許設(shè)置負長度值根蟹。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

p.one

{

border:red solid thin;

outline-style:solid;

outline-width:thin;

}

p.two

{

border:red solid thin;

outline-style:dotted;

outline-width:3px;

}

</style>

</head>

<body>

<p class="one">This is some text in a paragraph.</p>

<p class="two">This is some text in a paragraph.</p>

<p><b>注釋：</b>只有在規(guī)定了 !DOCTYPE 時，Internet Explorer 8 （以及更高版本）才支持 outline-width 屬性糟秘。</p>

</body>

</html>

6.2简逮、outline-style 屬性用于設(shè)置元素的整個輪廓的樣式。樣式不能是 none尿赚，否則輪廓不會出現(xiàn)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

{

border: red solid thin;

}

p.dotted {outline-style: dotted}

p.dashed {outline-style: dashed}

p.solid {outline-style: solid}

p.double {outline-style: double}

p.groove {outline-style: groove}

p.ridge {outline-style: ridge}

p.inset {outline-style: inset}

p.outset {outline-style: outset}

</style>

</head>

<body>

<p class="dotted">A dotted outline</p>

<p class="dashed">A dashed outline</p>

<p class="solid">A solid outline</p>

<p class="double">A double outline</p>

<p class="groove">A groove outline</p>

<p class="ridge">A ridge outline</p>

<p class="inset">An inset outline</p>

<p class="outset">An outset outline</p>

<p><b>注釋：</b>只有在規(guī)定了 !DOCTYPE 時散庶，Internet Explorer 8 （以及更高版本）才支持 outline-style 屬性。</p>

</body>

</html>

6.3凌净、outline （輪廓）是繪制于元素周圍的一條線悲龟，位于邊框邊緣的外圍，可起到突出元素的作用冰寻。outline 屬性可設(shè)置元素周圍的輪廓線

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

{

border:red solid thin;

outline-style:dotted;

outline-color:#00ff00;

}

</style>

</head>

<body>

<p><b>注釋：</b>只有在規(guī)定了 !DOCTYPE 時须教，Internet Explorer 8 （以及更高版本）才支持 outline-color 屬性。</p>

</body>

</html>

6.4斩芭、outline整合：outline:#00FF00 dotted thick;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

{

border:red solid thin;

outline:#00ff00 dotted thick;

}

</style>

</head>

<body>

<p><b>注釋：</b>只有在規(guī)定了 !DOCTYPE 時轻腺，Internet Explorer 8 （以及更高版本）才支持 outline 屬性。</p>

</body>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末划乖，一起剝皮案震驚了整個濱河市贬养，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌迁筛，老刑警劉巖煤蚌，帶你破解...
沈念sama閱讀 217,277評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件耕挨，死亡現(xiàn)場離奇詭異，居然都是意外死亡尉桩，警方通過查閱死者的電腦和手機筒占，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,689評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來蜘犁，“玉大人翰苫，你說我怎么就攤上這事≌獬龋” “怎么了奏窑？”我有些...
開封第一講書人閱讀 163,624評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長屈扎。經(jīng)常有香客問我埃唯，道長，這世上最難降的妖魔是什么鹰晨？我笑而不...
開封第一講書人閱讀 58,356評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任墨叛，我火速辦了婚禮，結(jié)果婚禮上模蜡，老公的妹妹穿的比我還像新娘漠趁。我一直安慰自己，他們只是感情好忍疾，可當我...
茶點故事閱讀 67,402評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布闯传。她就那樣靜靜地躺著，像睡著了一般卤妒。火紅的嫁衣襯著肌膚如雪甥绿。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,292評論 1贊 301
城市分裂傳說
那天则披，我揣著相機與錄音妹窖，去河邊找鬼。笑死收叶，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的共苛。我是一名探鬼主播判没，決...
沈念sama閱讀 40,135評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼隅茎！你這毒婦竟也來了澄峰？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,992評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤辟犀，失蹤者是張志新（化名）和其女友劉穎俏竞，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,429評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡魂毁，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,636評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年玻佩，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片席楚。...
茶點故事閱讀 39,785評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡咬崔，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出烦秩，到底是詐尸還是另有隱情垮斯，我是刑警寧澤，帶...
沈念sama閱讀 35,492評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布只祠，位于F島的核電站兜蠕，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏抛寝。R本人自食惡果不足惜熊杨，卻給世界環(huán)境...
茶點故事閱讀 41,092評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望墩剖。院中可真熱鬧猴凹，春花似錦、人聲如沸岭皂。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,723評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽爷绘。三九已至书劝，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間土至，已是汗流浹背购对。一陣腳步聲響...
開封第一講書人閱讀 32,858評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留陶因，地道東北人骡苞。一個月前我還...
沈念sama閱讀 47,891評論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像楷扬，于是被迫代替她去往敵國和親解幽。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,713評論 2贊 354

從屌絲到架構(gòu)師的飛越（CSS篇）-CSS邊框

推薦閱讀更多精彩內(nèi)容