CSS基礎(chǔ)教程：outline（輪廓）屬性實(shí)例

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

CSS outline 屬性規(guī)定元素輪廓的樣式、顏色和寬度。

輪廓（Outline）實(shí)例：

在元素周圍畫線

本例演示使用outline屬性在元素周圍畫一條線。

<html>
<head>
<style type="text/css">
p 
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
</style>
</head>
<body>
<p><b>注釋：</b>只有在規(guī)定了 !DOCTYPE 時(shí)，Internet Explorer 8 （以及更高版本） 才支持 outline 屬性。</p>
</body>
</html>

CSS outline（輪廓）屬性實(shí)例

設(shè)置輪廓的顏色

本例演示如何設(shè)置輪廓的顏色。

<html>
<head>
<style type="text/css">
p 
{
border:red solid thin;
outline-style:dotted;
outline-color:#00ff00;
}
</style>
</head>
<body>
<p><b>注釋：</b>只有在規(guī)定了 !DOCTYPE 時(shí)，Internet Explorer 8 （以及更高版本） 才支持 outline-color 屬性。</p>
</body>
</html>

CSS outline（輪廓）屬性實(shí)例

設(shè)置輪廓的樣式

本例演示如何設(shè)置輪廓的樣式。

<html>
<head>
<style type="text/css">
p
{
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 時(shí)，Internet Explorer 8 （以及更高版本） 才支持 outline-style 屬性。</p>
</body>
</html>

CSS outline（輪廓）屬性實(shí)例

設(shè)置輪廓的寬度

本例演示如何設(shè)置輪廓的寬度。

<html>
<head>
<style type="text/css">
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 時(shí)，Internet Explorer 8 （以及更高版本） 才支持 outline-width 屬性。</p>
</body>
</html>

CSS outline（輪廓）屬性實(shí)例

希望以上可以解決你們心中的一些疑惑，其中可能會(huì)有不對(duì)的需要改進(jìn)的地方或是表達(dá)喜愛，歡迎留言。感覺還不錯(cuò)歡迎關(guān)注收藏轉(zhuǎn)載哦！！！！

文鏈接： https://getflywheel.com/layout/css-grid-layouts-how-to/

柵格布局的思想起源源自于印刷設(shè)計(jì)。柵格是用來將設(shè)計(jì)元素精確定位到頁面上的的測量工具。這種想法經(jīng)常被用在網(wǎng)頁上來進(jìn)行內(nèi)容組織和統(tǒng)一，提升用戶的視覺體驗(yàn)。

網(wǎng)頁設(shè)計(jì)剛起步的時(shí)候，設(shè)計(jì)和布局都是是相當(dāng)簡單的，通常包含頭部，側(cè)邊欄，內(nèi)容區(qū)域和頁腳。現(xiàn)在，隨著網(wǎng)絡(luò)的演變，網(wǎng)頁的布局也變得更加復(fù)雜，做網(wǎng)頁設(shè)計(jì)師的人也隨之增加。我們經(jīng)常需要大量的內(nèi)容區(qū)域，響應(yīng)式設(shè)計(jì)，多頁面模板設(shè)計(jì)，以及許多其他的。浮動(dòng)和定位在實(shí)現(xiàn)這些設(shè)計(jì)的時(shí)候，是必不可少的。但浮動(dòng)聽起來簡單，實(shí)際操作起來卻很棘手。

但接下來，我們會(huì)介紹一種簡單的設(shè)計(jì)布局。隨著CSS柵格布局的不斷發(fā)展，成為設(shè)計(jì)師也會(huì)變得越來越容易。

CSS柵格兼容性

作為一名設(shè)計(jì)師，需要了解網(wǎng)頁設(shè)計(jì)的未來。CSS柵格布局將改變現(xiàn)有規(guī)則，為設(shè)計(jì)師處理頭痛了許多年的定位。雖然目前還不是主流的做法，但是這是一件值得期待的事情。

在我們真的深入了解柵格布局之前，要強(qiáng)調(diào)的一件事，瀏覽器并不普遍支持，希望這種工作方式在未來可以得到越來越多的瀏覽器支持。不過，好消息是，您可以輕松地嘗試使用CSS柵格布局，以及了解它是如何工作的。

在使用示例之前，請(qǐng)你確保你的瀏覽器支持。目前只有Internet Explorer 10+和 edge 支持。其他的瀏覽器通過一些手段也可以瀏覽，但因?yàn)樗皇枪倬W(wǎng)支持，所以你只能是不斷的去嘗試。（If you view the Can I Use documentation on CSS Grid Layouts, at the time of this post, you will notice little flag indicators. These show that you will need to be in “flag mode.”）如果你邊使用Can I Use來查看柵格布局的兼容性，邊看這篇文章，那么你就可以注意到每個(gè)細(xì)節(jié)的不同。

當(dāng)您在測試柵格布局的時(shí)候，你需要做幾件事情幫助你正確地看到布局。使用Chrome查看，你需要啟用“實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)功能”。如何啟用呢？在Chrome 瀏覽器中打開chrome://flags 這個(gè)地址。當(dāng)url 鏈接chrome://flags加載完畢之后，向下滾動(dòng)頁面，找到該選項(xiàng)，設(shè)置為“啟用實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)功能”。

火狐也允許您查看柵格布局，通過“l(fā)ayout.css.grid.enabled”參數(shù)設(shè)置。開啟方法類似于Chrome瀏覽器的說明。在Firefox瀏覽器中URL輸入 about:config。向下滾動(dòng)頁面，設(shè)置為啟用 “l(fā)ayout.css.grid.enabled” 。

如果你想馬上開始使用CSS柵格布局，對(duì)于不支持它的瀏覽器還有一個(gè)變通方案。如果你熟悉polyfills的想法，那已經(jīng)有解決方案了。如果你不熟悉polyfills，可以利用瀏覽器后退，利用JavaScript的力量，允許現(xiàn)代的瀏覽器功能（例如CSS柵格布局）在舊的瀏覽器運(yùn)行。

Polyfills超出本教程范圍，但隨著越來越多的設(shè)計(jì)師開始使用這項(xiàng)技術(shù)，更多的polyfill 技術(shù)將會(huì)涌現(xiàn)。如果你準(zhǔn)備嘗試，這里是一個(gè)推薦的 polyfill option。請(qǐng)務(wù)必閱讀作者的文檔，了解有關(guān)如何使用它的詳細(xì)信息。

那么，在承諾100%使用CSS柵格布局之前，要確保使用的生產(chǎn)代碼，做一些深入的測試。

CSS柵格布局基本知識(shí)

通過利用CSS，柵格布局將有助于您的網(wǎng)頁內(nèi)容的呈現(xiàn)。這里有一篇相對(duì)較新的定義的屬性的CSS柵格布局規(guī)范。這是學(xué)習(xí)柵格設(shè)計(jì)的一個(gè)很好的資源。CSS柵格設(shè)計(jì)有助于簡化的東西，使創(chuàng)建布局更加容易。想象一下，柵格作為一種結(jié)構(gòu)，尺寸可以被定義。

柵格的組成

行(lines)

在上圖中，有五條垂直線和三條水平線。線從1開始編號(hào)。示例中，垂直線從左至右，這取決于書寫方向。如果書寫方向是由右至左，順序就顛倒過來。可以給線起名（可選），方便在CSS中引用。

軌道(tracks)

軌道是兩條平行線之間的空間。在圖中，有四個(gè)垂直軌道和兩個(gè)水平的軌道。這是線和軌道的共同結(jié)果。線是記錄內(nèi)容的起點(diǎn)和終點(diǎn)。軌道是內(nèi)容真實(shí)存在的位置。

單元格(cells)

單元格是水平和垂直軌道的相交處。圖中有八個(gè)單元格。

面(areas)

單元格指定面的時(shí)候發(fā)揮作用。面是矩形形狀，可以跨越多個(gè)單元格。像線一樣，面也可以任意命名。如在圖中的幾個(gè)標(biāo)簽：“A”，“B”，和“C”。

創(chuàng)建柵格布局

用老方格紙，布局之前，先勾勒輪廓。

HTML柵格

<div class="grid header">Header</div>

<div class="grid sidebar">Sidebar</div>

<div class="grid content">Main Content</div>

<div class="grid extra">Extra Content</div>

<div class="grid footer">Footer</div>

</div>

容器Container是非常重要的。容器內(nèi)是用于顯示網(wǎng)站的不同的內(nèi)容塊。內(nèi)容塊的順序并不重要。接下來，我們將使用CSS將它們按照我們的布局顯示。

CSS樣式

HTML完成后，我們來寫CSS。給container設(shè)置display:grid 或者 display:inline-grid. 如果你希望設(shè)置塊級(jí)元素，那使用 display:grid ; 如果你希望設(shè)置成內(nèi)聯(lián)元素，那使用display:inline-grid。想了解更多細(xì)節(jié)，可以查看文檔

.container {

display: grid;

grid-template-columns: 0.25fr 15px 0.75fr;

grid-template-rows: auto 25px auto 25px auto 25px auto;

}

.grid {

background-color: #444;

color: #fff;

padding: 25px;

font-size: 3rem;

}

grid-template-columns和grid-template-rows屬性用于指定行和列的寬度。這個(gè)布局定義了五列。15px是兩個(gè)元素之間的間距。第三列占用0.25份的剩余空間。同樣地，第五列占用0.75份的剩余空間。（疑問：圖中根本沒有第五列啊，感覺作者寫錯(cuò)了）

There are responsive customizations that can be made, but this is a great step to take prior to that. It may seem like using pixel measurements would be limiting, however, using auto for the first row in grid-template-rows allows the row to expand as necessary based on the content inside it. The 25px row acts as a gutter.

對(duì)于響應(yīng)式布局這個(gè)規(guī)范是很便利的，如果使用像素，則會(huì)被限定死。第一行使用grid-template-rows來表示，隨著內(nèi)容需要的變化而變化。設(shè)置padding 成 25 像素，與頭部留有間隙。

元素看起來很緊湊，但再加一些規(guī)范，元素將初具規(guī)模。

這個(gè)例子先放置的頭部，但元素位置可以按您喜歡的任意順序擺放。如果你想從頁腳開始，也可以。

我們先從頭部開始，從列1開始到列4結(jié)束，從行1開始到行2結(jié)束，CSS看起來就像這樣：

.header {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 2;

}

您可能會(huì)注意到側(cè)邊欄被壓住了，我們無法看到它。我們需要重新排列一下。在這種布局,通過行的位置進(jìn)行排列。以行作為標(biāo)準(zhǔn)。頭部占一行和二行的位置，側(cè)邊欄，從三行開始，到六行結(jié)束。頭部到第二行結(jié)束，側(cè)邊欄從第三行開始正好可以顯示到頭部下面。要查看示例，請(qǐng)參見該項(xiàng)目Codepen。

我們使用grid-column-start指定一個(gè)元素起始垂直線。在本例中,它將被設(shè)置為3。grid-column-end表示一個(gè)元素的結(jié)束垂直線。在這種情況下,這個(gè)屬性就等于四。其他行值也用同樣的方式設(shè)置。側(cè)邊欄的位置是存在的,它只是覆蓋的內(nèi)容區(qū)。

.sidebar {

grid-column-start: 1;

grid-column-end: 2;

grid-row-start: 3;

grid-row-end: 6;

background: #a0c263;

}

主要內(nèi)容在第三列開始，第四列結(jié)束。側(cè)邊欄和內(nèi)容區(qū)域的頂部對(duì)齊，所以他們都從grid-row-start第三行開始。你可能想讓內(nèi)容欄比側(cè)邊欄高很多。通過設(shè)置容器上的高度，假如400像素，這個(gè)時(shí)候，它就會(huì)比其它元素高很多。

.content {

grid-column-start: 3;

grid-column-end: 4;

grid-row-start: 3;

grid-row-end: 4;

background: #f5c531;

height: 400px;

}

最后兩個(gè)內(nèi)容區(qū)域是額外內(nèi)容區(qū)域和頁腳。

.extra {

grid-column-start: 3;

grid-column-end: 4;

grid-row-start: 5;

grid-row-end: 6;

background: #898989;

}

.footer {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 7;

grid-row-end: 8;

background: #FFA500;

}

響應(yīng)式優(yōu)勢

布局已經(jīng)創(chuàng)建好了，似乎很像一個(gè)“桌面”。那么平板電腦和移動(dòng)設(shè)備怎么顯示？CSS柵格布局加上媒體查詢可以適應(yīng)不同的屏幕尺寸。真正酷的是，你可以在這些不同的媒體查詢范圍里，改變內(nèi)容區(qū)域。作為一個(gè)設(shè)計(jì)師，這意味著你選擇什么是最適合你的布局在不同的斷點(diǎn)。例如，如果你想要將“次要內(nèi)容”被放在“內(nèi)容”區(qū)域之上，可以指定正確的行和列。

/* For mobile phones: */

.header {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 2;

}

.extra {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 3;

grid-row-end: 4;

}

.content {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 5;

grid-row-end: 6;

background: #f5c531;

height: 400px;

}

通過設(shè)置成列1開始，列4結(jié)束，來設(shè)置成內(nèi)容全寬。將“次要內(nèi)容”顯示在了“內(nèi)容”之上。

CSS柵格布局是一種新型的布局方式。正如你所看到的，這種方法很容易創(chuàng)建一個(gè)簡單的頁面布局去運(yùn)行。上面這個(gè)簡單的例子也可以為如何創(chuàng)建更復(fù)雜的布局打下良好的基礎(chǔ)。假如這個(gè)技術(shù)獲得普及，在設(shè)計(jì)各種設(shè)備和尺寸，布局大小自定義的時(shí)候，這個(gè)技術(shù)會(huì)是一個(gè)優(yōu)勢。

問切 wenqie（.cn），是切圖網(wǎng)旗下關(guān)注用戶體驗(yàn)，專注H5移動(dòng)適配的品牌網(wǎng)站。

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

輪廓（outline）屬性指定了樣式，顏色和外邊框的寬度。

輪廓（outline）實(shí)例

在元素周圍畫線

本例演示使用outline屬性在元素周圍畫一條線。.

設(shè)置輪廓的樣式

本例演示如何設(shè)置輪廓的樣式。

設(shè)置輪廓的顏色

本例演示如何設(shè)置輪廓的顏色。

設(shè)置輪廓的寬度

本例演示如何設(shè)置輪廓的寬度。

CSS 輪廓（outline）

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

CSS outline 屬性規(guī)定元素輪廓的樣式、顏色和寬度。

所有CSS 輪廓（outline）屬性

"CSS" 列中的數(shù)字表示哪個(gè)CSS版本定義了該屬性(CSS1 或者CSS2)。

屬性	說明	值	CSS
outline	在一個(gè)聲明中設(shè)置所有的外邊框?qū)傩?/td>	outline-coloroutline-styleoutline-widthinherit	2
outline-color	設(shè)置外邊框的顏色	color-namehex-numberrgb-numberinvertinherit	2
outline-style	設(shè)置外邊框的樣式	nonedotteddashedsoliddoublegrooveridgeinsetoutsetinherit	2
outline-width	設(shè)置外邊框的寬度	thinmediumthicklengthinherit	2

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

在線咨詢

上一篇：使用JS開發(fā)簡單的音樂播放器
下一篇：輕松添加！批量處理HTML文本，快速添加所需內(nèi)容！

您的項(xiàng)目需求

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

整合營銷服務(wù)商

CSS基礎(chǔ)教程：outline（輪廓）屬性實(shí)例

在元素周圍畫線

設(shè)置輪廓的顏色

設(shè)置輪廓的樣式

設(shè)置輪廓的寬度

您的項(xiàng)目需求