国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<s id="2pvdw"><progress id="2pvdw"><legend id="2pvdw"></legend></progress></s>

<center id="2pvdw"><center id="2pvdw"><wbr id="2pvdw"></wbr></center></center>

CSS邊框、邊距、輪廓（邊框?qū)挾?顏色/各邊/簡(jiǎn)寫(xiě)屬性/圓角邊框/內(nèi)外邊距/高度寬度/框模型/輪廓寬度/顏色/屬性/偏移）——萬(wàn)字長(zhǎng)文|一文搞懂

2年前作者：Vec_Kun分類(lèi)：Toy博客閱讀(17)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了CSS邊框、邊距、輪廓（邊框?qū)挾?顏色/各邊/簡(jiǎn)寫(xiě)屬性/圓角邊框/內(nèi)外邊距/高度寬度/框模型/輪廓寬度/顏色/屬性/偏移）——萬(wàn)字長(zhǎng)文|一文搞懂。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

目錄

CSS邊框

CSS 邊框?qū)傩?/p>

CSS 邊框樣式

實(shí)例

CSS 邊框?qū)挾?/p>

實(shí)例

特定邊的寬度

實(shí)例

CSS 邊框顏色

實(shí)例

特定邊框的顏色

實(shí)例

HEX 值

實(shí)例

RGB 值

實(shí)例

HSL 值

實(shí)例

CSS 邊框 - 單獨(dú)的邊

實(shí)例

不同的邊框樣式

實(shí)例

它的工作原理是這樣的：

border-style: dotted solid double dashed;

border-style: dotted solid double;

border-style: dotted solid;

border-style: dotted;

實(shí)例

CSS Border - 簡(jiǎn)寫(xiě)屬性

實(shí)例

左邊框

下邊框

CSS 圓角邊框

實(shí)例

更多實(shí)例

所有 CSS 邊框?qū)傩?/p>

CSS 外邊距

Margin - 單獨(dú)的邊

實(shí)例

Margin - 簡(jiǎn)寫(xiě)屬性

工作原理是這樣的：

實(shí)例

實(shí)例

實(shí)例

實(shí)例

auto 值

實(shí)例

inherit 值

實(shí)例

延伸閱讀

外邊距合并

所有 CSS 外邊距屬性

CSS 內(nèi)邊距

Padding - 單獨(dú)的邊

實(shí)例

Padding - 簡(jiǎn)寫(xiě)屬性

工作原理是這樣的：

實(shí)例

實(shí)例

實(shí)例

實(shí)例

內(nèi)邊距和元素寬度

實(shí)例

實(shí)例

更多實(shí)例

所有 CSS 內(nèi)邊距屬性

延伸閱讀

CSS 設(shè)置高度和寬度

CSS 高度和寬度值

CSS 高度和寬度實(shí)例

實(shí)例

實(shí)例

設(shè)置 max-width

實(shí)例

親自試一試 - 實(shí)例

設(shè)置 CSS 尺寸屬性

CSS 框模型

實(shí)例

元素的寬度和高度

實(shí)例

?編輯

CSS 輪廓

CSS 輪廓樣式

實(shí)例

CSS 輪廓寬度

實(shí)例

CSS 輪廓顏色

實(shí)例

HEX 值

實(shí)例

RGB 值

實(shí)例

HSL 值

實(shí)例

反轉(zhuǎn)顏色

實(shí)例

CSS Outline - 簡(jiǎn)寫(xiě)屬性

實(shí)例

CSS 輪廓偏移

實(shí)例

實(shí)例

所有 CSS 輪廓屬性

總結(jié)

CSS邊框

CSS 邊框?qū)傩?/h3>
CSS?`border`?屬性允許指定元素邊框的樣式、寬度和顏色。

CSS 邊框樣式

border-style?屬性指定要顯示的邊框類(lèi)型。

允許以下值：

dotted?- 定義點(diǎn)線(xiàn)邊框

dashed?- 定義虛線(xiàn)邊框

solid?- 定義實(shí)線(xiàn)邊框

double?- 定義雙邊框

groove?- 定義 3D 坡口邊框。效果取決于 border-color 值

ridge?- 定義 3D 脊線(xiàn)邊框。效果取決于 border-color 值

inset?- 定義 3D inset 邊框。效果取決于 border-color 值

outset?- 定義 3D outset 邊框。效果取決于 border-color 值

none?- 定義無(wú)邊框

hidden?- 定義隱藏邊框

border-style?屬性可以設(shè)置一到四個(gè)值（用于上邊框、右邊框、下邊框和左邊框）。

實(shí)例

演示不同的邊框樣式：

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;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

結(jié)果：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

親自試一試

注意：除非設(shè)置了?border-style?屬性，否則其他 CSS 邊框?qū)傩远疾粫?huì)有任何作用！

CSS 邊框?qū)挾?/h3>
`border-width`?屬性指定四個(gè)邊框的寬度。

可以將寬度設(shè)置為特定大小（以 px、pt、cm、em 計(jì)），也可以使用以下三個(gè)預(yù)定義值之一：thin、medium 或 thick：

實(shí)例

演示不同的邊框?qū)挾龋?/p>

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
} 

p.four {
  border-style: dotted;
  border-width: thick;
}

結(jié)果：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

親自試一試

特定邊的寬度

border-width?屬性可以設(shè)置一到四個(gè)值（用于上邊框、右邊框、下邊框和左邊框）：

實(shí)例

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上邊框和下邊框?yàn)?5px，其他邊為 20px */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上邊框和下邊框?yàn)?20px，其他邊為 5px */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上邊框 25px，右邊框 10px，下邊框 4px，左邊框 35px */
}

親自試一試

CSS 邊框顏色

border-color?屬性用于設(shè)置四個(gè)邊框的顏色。

可以通過(guò)以下方式設(shè)置顏色：

name - 指定顏色名，比如 "red"

HEX - 指定十六進(jìn)制值，比如 "#ff0000"

RGB - 指定 RGB 值，比如 "rgb(255,0,0)"

HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"

transparent

注釋?zhuān)喝绻丛O(shè)置?border-color，則它將繼承元素的顏色。

實(shí)例

演示不同的邊框顏色：

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

結(jié)果：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

親自試一試

特定邊框的顏色

border-color?屬性可以設(shè)置一到四個(gè)值（用于上邊框、右邊框、下邊框和左邊框）。

實(shí)例

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上紅、右綠、下藍(lán)、左黃 */
}

親自試一試

HEX 值

邊框的顏色也可以使用十六進(jìn)制值（HEX）來(lái)指定：

實(shí)例

p.one {
  border-style: solid;
  border-color: #ff0000; /* 紅色 */
}

親自試一試

RGB 值

或者使用 RGB 值：

實(shí)例

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* 紅色 */
}

親自試一試

HSL 值

也可以使用 HSL 值：

實(shí)例

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* 紅色 */
}

親自試一試

可以在?CSS 顏色?章節(jié)中學(xué)到有關(guān) HEX、RGB 和 HSL 值的更多知識(shí)。

CSS 邊框 - 單獨(dú)的邊

從上面的例子中，我們已經(jīng)發(fā)現(xiàn)可以為每一側(cè)指定不同的邊框。

在 CSS 中，還有一些屬性可用于指定每個(gè)邊框（頂部、右側(cè)、底部和左側(cè)）：

實(shí)例

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

結(jié)果：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

親自試一試

不同的邊框樣式

上例的結(jié)果與此相同：

實(shí)例

p {
  border-style: dotted solid;
}

親自試一試

它的工作原理是這樣的：

如果?border-style?屬性設(shè)置四個(gè)值：

border-style: dotted solid double dashed;

上邊框是虛線(xiàn)
右邊框是實(shí)線(xiàn)
下邊框是雙線(xiàn)
左邊框是虛線(xiàn)

如果?border-style?屬性設(shè)置三個(gè)值：

border-style: dotted solid double;

上邊框是虛線(xiàn)
右和左邊框是實(shí)線(xiàn)
下邊框是雙線(xiàn)

如果?border-style?屬性設(shè)置兩個(gè)值：

border-style: dotted solid;

上和下邊框是虛線(xiàn)
右和左邊框是實(shí)線(xiàn)

如果?border-style?屬性設(shè)置一個(gè)值：

border-style: dotted;

四條邊均為虛線(xiàn)

實(shí)例

/* 四個(gè)值 */
p {
  border-style: dotted solid double dashed; 
}

/* 三個(gè)值 */
p {
  border-style: dotted solid double; 
}

/* 兩個(gè)值 */
p {
  border-style: dotted solid; 
}

/* 一個(gè)值 */
p {
  border-style: dotted; 
}

親自試一試

上例中使用的是?border-style?屬性。但?border-width?和?border-color?也同樣適用。

CSS Border - 簡(jiǎn)寫(xiě)屬性

就像我們?nèi)缟纤?jiàn)，處理邊框時(shí)要考慮許多屬性。

為了縮減代碼，也可以在一個(gè)屬性中指定所有單獨(dú)的邊框?qū)傩浴?/p>

border?屬性是以下各個(gè)邊框?qū)傩缘暮?jiǎn)寫(xiě)屬性：

border-width

border-style（必需）

border-color

實(shí)例

p {
  border: 5px solid red;
}

結(jié)果：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

親自試一試

我們還可以只為一個(gè)邊指定所有單個(gè)邊框?qū)傩裕?/p>

左邊框

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

結(jié)果：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

親自試一試

下邊框

p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

結(jié)果：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

親自試一試

CSS 圓角邊框

border-radius?屬性用于向元素添加圓角邊框：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

實(shí)例

p {
  border: 2px solid red;
  border-radius: 5px;
}

親自試一試

更多實(shí)例

一個(gè)聲明中的所有上邊框?qū)傩?/p>

本例演示簡(jiǎn)寫(xiě)屬性，用于在一條聲明中設(shè)置上邊框的所有屬性。

設(shè)置下邊框的樣式

本例演示如何設(shè)置下邊框的樣式。

設(shè)置左邊框的寬度

本例演示如何設(shè)置左邊框的寬度。

設(shè)置四條邊框的顏色

本例演示如何設(shè)置四條邊框的顏色。它可以擁有一到四種顏色。

設(shè)置右邊框的顏色

本例演示如何設(shè)置右邊框的顏色。

所有 CSS 邊框?qū)傩?/h3>

屬性描述

border 簡(jiǎn)寫(xiě)屬性，在一條聲明中設(shè)置所有邊框?qū)傩浴?/td>

border-color 簡(jiǎn)寫(xiě)屬性，設(shè)置四條邊框的顏色。

border-radius 簡(jiǎn)寫(xiě)屬性，可設(shè)置圓角的所有四個(gè) border-*-radius 屬性。

border-style 簡(jiǎn)寫(xiě)屬性，設(shè)置四條邊框的樣式。

border-width 簡(jiǎn)寫(xiě)屬性，設(shè)置四條邊框的寬度。

border-bottom 簡(jiǎn)寫(xiě)屬性，在一條聲明中設(shè)置所有下邊框?qū)傩浴?/td>

border-bottom-color 設(shè)置下邊框的顏色。

border-bottom-style 設(shè)置下邊框的樣式。

border-bottom-width 設(shè)置下邊框的寬度。

border-left 簡(jiǎn)寫(xiě)屬性，在一條聲明中設(shè)置所有左邊框?qū)傩浴?/td>

border-left-color 設(shè)置左邊框的顏色。

border-left-style 設(shè)置左邊框的樣式。

border-left-width 設(shè)置左邊框的寬度。

border-right 簡(jiǎn)寫(xiě)屬性，在一條聲明中設(shè)置所有右邊框?qū)傩浴?/td>

border-right-color 設(shè)置右邊框的顏色。

border-right-style 設(shè)置右邊框的樣式。

border-right-width 設(shè)置右邊框的寬度。

border-top 簡(jiǎn)寫(xiě)屬性，在一條聲明中設(shè)置所有上邊框?qū)傩浴?/td>

border-top-color 設(shè)置上邊框的顏色。

border-top-style 設(shè)置上邊框的樣式。

border-top-width 設(shè)置上邊框的寬度。

CSS 圓角邊框

CSS 外邊距合并

親自試一試

CSS 外邊距

CSS?margin?屬性用于在任何定義的邊框之外，為元素周?chē)鷦?chuàng)建空間。

通過(guò) CSS，可以完全控制外邊距。有些屬性可用于設(shè)置元素每側(cè)（上、右、下和左）的外邊距。

Margin - 單獨(dú)的邊

CSS 擁有用于為元素的每一側(cè)指定外邊距的屬性：

margin-top

margin-right

margin-bottom

margin-left

所有外邊距屬性都可以設(shè)置以下值：

auto - 瀏覽器來(lái)計(jì)算外邊距

length?- 以 px、pt、cm 等單位指定外邊距

% - 指定以包含元素寬度的百分比計(jì)的外邊距

inherit - 指定應(yīng)從父元素繼承外邊距

提示：允許負(fù)值。

實(shí)例

為 <p> 元素的所有四個(gè)邊設(shè)置不同的外邊距：

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

親自試一試

Margin - 簡(jiǎn)寫(xiě)屬性

為了縮減代碼，可以在一個(gè)屬性中指定所有外邊距屬性。

margin?屬性是以下各外邊距屬性的簡(jiǎn)寫(xiě)屬性：

margin-top

margin-right

margin-bottom

margin-left

工作原理是這樣的：

如果?margin?屬性有四個(gè)值：

margin: 25px 50px 75px 100px;
- 上外邊距是 25px
- 右外邊距是 50px
- 下外邊距是 75px
- 左外邊距是 100px

實(shí)例

margin 簡(jiǎn)寫(xiě)屬性設(shè)置四個(gè)值：

p {
  margin: 25px 50px 75px 100px;
}

親自試一試

如果?margin?屬性設(shè)置三個(gè)值：

margin: 25px 50px 75px;
- 上外邊距是 25px
- 右和左外邊距是 50px
- 下外邊距是 75px

實(shí)例

使用已設(shè)置三個(gè)值的 ?margin? 簡(jiǎn)寫(xiě)屬性：

p {
  margin: 25px 50px 75px;
}

親自試一試

如果?margin屬性設(shè)置兩個(gè)值：

margin: 25px 50px;
- 上和下外邊距是 25px
- 右和左外邊距是 50px

實(shí)例

使用設(shè)置了兩個(gè)值的 margin 簡(jiǎn)寫(xiě)屬性：

p {
  margin: 25px 50px;
}

親自試一試

如果?margin?屬性設(shè)置了一個(gè)值：

margin: 25px;
- 所有四個(gè)外邊距都是 25px

實(shí)例

使用設(shè)置一個(gè)值的 margin 簡(jiǎn)寫(xiě)屬性：

p {
  margin: 25px;
}

親自試一試

auto 值

我們可以將 margin 屬性設(shè)置為?auto，以使元素在其容器中水平居中。

然后，該元素將占據(jù)指定的寬度，并且剩余空間將在左右邊界之間平均分配。

實(shí)例

使用?margin: auto：

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

親自試一試

inherit 值

本例使 <p class="ex1"> 元素的左外邊距繼承自父元素（<div>）：

實(shí)例

使用 inherit 值：

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

親自試一試

延伸閱讀

框模型：CSS 外邊距

外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。

合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

外邊距合并

外邊距合并（疊加）是一個(gè)相當(dāng)簡(jiǎn)單的概念。但是，在實(shí)踐中對(duì)網(wǎng)頁(yè)進(jìn)行布局時(shí)，它會(huì)造成許多混淆。

簡(jiǎn)單地說(shuō)，外邊距合并指的是：當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。請(qǐng)看下圖：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

親自試一試

當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)），它們的上和/或下外邊距也會(huì)發(fā)生合并。請(qǐng)看下圖：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

親自試一試

盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并。

假設(shè)有一個(gè)空元素，它有外邊距，但是沒(méi)有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

這就是一系列的段落元素占用空間非常小的原因，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄?，形成了一個(gè)小的外邊距。

外邊距合并初看上去可能有點(diǎn)奇怪，但是實(shí)際上，它是有意義的。

以由幾個(gè)段落組成的典型文本頁(yè)面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒(méi)有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁(yè)面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

注釋?zhuān)褐挥衅胀ㄎ臋n流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

所有 CSS 外邊距屬性

屬性	描述
margin	用于在一條聲明中設(shè)置外邊距屬性的簡(jiǎn)寫(xiě)屬性。
margin-bottom	設(shè)置元素的下外邊距。
margin-left	設(shè)置元素的左外邊距。
margin-right	設(shè)置元素的右外邊距。
margin-top	設(shè)置元素的上外邊距。

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

CSS 內(nèi)邊距

CSS?padding?屬性用于在任何定義的邊界內(nèi)的元素內(nèi)容周?chē)煽臻g。

通過(guò) CSS，我們可以完全控制內(nèi)邊距（填充）。有一些屬性可以為元素的每一側(cè)（上、右、下和左側(cè)）設(shè)置內(nèi)邊距。

Padding - 單獨(dú)的邊

CSS 擁有用于為元素的每一側(cè)指定內(nèi)邊距的屬性：

padding-top

padding-right

padding-bottom

padding-left

所有內(nèi)邊距屬性都可以設(shè)置以下值：

length?- 以 px、pt、cm 等單位指定內(nèi)邊距
% - 指定以包含元素寬度的百分比計(jì)的內(nèi)邊距
inherit - 指定應(yīng)從父元素繼承內(nèi)邊距

提示：不允許負(fù)值。

實(shí)例

為 <div> 元素的所有四個(gè)邊設(shè)置不同的內(nèi)邊距：

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

親自試一試

Padding - 簡(jiǎn)寫(xiě)屬性

為了縮減代碼，可以在一個(gè)屬性中指定所有內(nèi)邊距屬性。

padding?屬性是以下各內(nèi)邊距屬性的簡(jiǎn)寫(xiě)屬性：

padding-top

padding-right

padding-bottom

padding-left

工作原理是這樣的：

如果?padding?屬性有四個(gè)值：

padding: 25px 50px 75px 100px;
- 上內(nèi)邊距是 25px
- 右內(nèi)邊距是 50px
- 下內(nèi)邊距是 75px
- 左內(nèi)邊距是 100px

實(shí)例

使用設(shè)置了四個(gè)值的 padding 簡(jiǎn)寫(xiě)屬性：

div {
  padding: 25px 50px 75px 100px;
}

親自試一試

如果?padding?屬性設(shè)置了三個(gè)值：

padding: 25px 50px 75px;
- 上內(nèi)邊距是 25px
- 右和左內(nèi)邊距是 50px
- 下內(nèi)邊距是 75px

實(shí)例

使用設(shè)置了三個(gè)值的 padding 簡(jiǎn)寫(xiě)屬性：

div {
  padding: 25px 50px 75px;
}

親自試一試

如果?padding?屬性設(shè)置了兩個(gè)值：

padding: 25px 50px;
- 上和下內(nèi)邊距是 25px
- 右和左內(nèi)邊距是 50px

實(shí)例

使用設(shè)置了兩個(gè)值的 padding 簡(jiǎn)寫(xiě)屬性：

div {
  padding: 25px 50px;
}

親自試一試

如果?padding?屬性設(shè)置了一個(gè)值：

padding: 25px;
- 所有四個(gè)內(nèi)邊距都是 25px

實(shí)例

使用設(shè)置了一個(gè)值的 padding 簡(jiǎn)寫(xiě)屬性：

div {
  padding: 25px;
}

親自試一試

內(nèi)邊距和元素寬度

CSS?width?屬性指定元素內(nèi)容區(qū)域的寬度。內(nèi)容區(qū)域是元素（盒模型）的內(nèi)邊距、邊框和外邊距內(nèi)的部分。

因此，如果元素?fù)碛兄付ǖ膶挾?，則添加到該元素的內(nèi)邊距會(huì)添加到元素的總寬度中。這通常是不希望的結(jié)果。

實(shí)例

在這里，<div> 元素的寬度為 300px。但是，<div> 元素的實(shí)際寬度將是 350px（300px + 左內(nèi)邊距 25px + 右內(nèi)邊距 25px）：

div {
  width: 300px;
  padding: 25px;
}

親自試一試

若要將寬度保持為 300px，無(wú)論填充量如何，那么我們可以使用?box-sizing?屬性。這將導(dǎo)致元素保持其寬度。如果增加內(nèi)邊距，則可用的內(nèi)容空間會(huì)減少。

實(shí)例

使用 box-sizing 屬性將寬度保持為 300px，無(wú)論填充量如何：

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

親自試一試

更多實(shí)例

設(shè)置左內(nèi)邊距

本例演示如何設(shè)置 <p> 元素的左內(nèi)邊距。

設(shè)置右內(nèi)邊距

本例演示如何設(shè)置 <p> 元素的右內(nèi)邊距。

設(shè)置上內(nèi)邊距

本例演示如何設(shè)置 <p> 元素的上內(nèi)邊距。

設(shè)置下內(nèi)邊距

本例演示如何設(shè)置 <p> 元素的下內(nèi)邊距。

所有 CSS 內(nèi)邊距屬性

屬性	描述
padding	用于在一條聲明中設(shè)置所有內(nèi)邊距屬性的簡(jiǎn)寫(xiě)屬性。
padding-bottom	設(shè)置元素的下內(nèi)邊距。
padding-left	設(shè)置元素的左內(nèi)邊距。
padding-right	設(shè)置元素的右內(nèi)邊距。
padding-top	設(shè)置元素的上內(nèi)邊距。

延伸閱讀

課外書(shū)：框模型：CSS 內(nèi)邊距

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

CSS 設(shè)置高度和寬度

height?和?width?屬性用于設(shè)置元素的高度和寬度。

height 和 width 屬性不包括內(nèi)邊距、邊框或外邊距。它設(shè)置的是元素內(nèi)邊距、邊框以及外邊距內(nèi)的區(qū)域的高度或?qū)挾取?/p>

CSS 高度和寬度值

height?和?width?屬性可設(shè)置如下值：

auto?- 默認(rèn)。瀏覽器計(jì)算高度和寬度。

length?- 以 px、cm 等定義高度/寬度。

%?- 以包含塊的百分比定義高度/寬度。

initial?- 將高度/寬度設(shè)置為默認(rèn)值。

inherit?- 從其父值繼承高度/寬度。

CSS 高度和寬度實(shí)例

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

實(shí)例

設(shè)置 <div> 元素的高度和寬度：

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

親自試一試

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

實(shí)例

設(shè)置另一個(gè) <div> 元素的高度和寬度：

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

親自試一試

注意：請(qǐng)記住，height?和?width?屬性不包括內(nèi)邊距、邊框或外邊距！它們?cè)O(shè)置的是元素的內(nèi)邊距、邊框和外邊距內(nèi)的區(qū)域的高度/寬度！

設(shè)置 max-width

max-width?屬性用于設(shè)置元素的最大寬度。

可以用長(zhǎng)度值（例如 px、cm 等）或包含塊的百分比（％）來(lái)指定 max-width（最大寬度），也可以將其設(shè)置為 none（默認(rèn)值。意味著沒(méi)有最大寬度）。

當(dāng)瀏覽器窗口小于元素的寬度（500px）時(shí)，會(huì)發(fā)生之前那個(gè)?<div>?的問(wèn)題。然后，瀏覽器會(huì)將水平滾動(dòng)條添加到頁(yè)面。

在這種情況下，使用?max-width?能夠改善瀏覽器對(duì)小窗口的處理。

提示：將瀏覽器窗口拖動(dòng)到小于500px的寬度，以查看兩個(gè) div 之間的區(qū)別！

此元素的高度為 100 像素，最大寬度為 500 像素。

此元素的高度為 100 像素，最大寬度為 500 像素。

注釋?zhuān)?code>max-width?屬性的值將覆蓋?width（寬度）。

實(shí)例

這個(gè) <div> 元素的高度為 100 像素，最大寬度為 500 像素：

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

親自試一試

親自試一試 - 實(shí)例

設(shè)置元素的高度和寬度

本例演示如何設(shè)置不同元素的高度和寬度。

使用百分比設(shè)置圖像的高度和寬度

本例演示如何使用百分比值設(shè)置圖像的高度和寬度。

設(shè)置元素的最小寬度和最大寬度

本例演示如何使用像素值設(shè)置元素的最小寬度和最大寬度。

設(shè)置元素的最小高度和最大高度

本例演示如何使用像素值設(shè)置元素的最小高度和最大高度。

設(shè)置 CSS 尺寸屬性

屬性	描述
height	設(shè)置元素的高度。
max-height	設(shè)置元素的最大高度。
max-width	設(shè)置元素的最大寬度。
min-height	設(shè)置元素的最小高度。
min-width	設(shè)置元素的最小寬度。
width	設(shè)置元素的寬度。

CSS 框模型

所有 HTML 元素都可以視為方框。在 CSS 中，在談?wù)撛O(shè)計(jì)和布局時(shí)，會(huì)使用術(shù)語(yǔ)“盒模型”或“框模型”。

CSS 框模型實(shí)質(zhì)上是一個(gè)包圍每個(gè) HTML 元素的框。它包括：外邊距、邊框、內(nèi)邊距以及實(shí)際的內(nèi)容。下圖展示了框模型：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

對(duì)不同部分的說(shuō)明：

內(nèi)容?- 框的內(nèi)容，其中顯示文本和圖像。

內(nèi)邊距?- 清除內(nèi)容周?chē)膮^(qū)域。內(nèi)邊距是透明的。

邊框?- 圍繞內(nèi)邊距和內(nèi)容的邊框。

外邊距?- 清除邊界外的區(qū)域。外邊距是透明的。

框模型允許我們?cè)谠刂車(chē)砑舆吙?，并定義元素之間的空間。

元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素。

提示：背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。

內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。但是，許多元素將由用戶(hù)代理樣式表設(shè)置外邊距和內(nèi)邊距。可以通過(guò)將元素的 margin 和 padding 設(shè)置為零來(lái)覆蓋這些瀏覽器樣式。這可以分別進(jìn)行，也可以使用通用選擇器對(duì)所有元素進(jìn)行設(shè)置：

* {
  margin: 0;
  padding: 0;
}

在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。

假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到 100 個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素，請(qǐng)看下圖：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示：內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個(gè)元素的所有邊，也可以應(yīng)用于單獨(dú)的邊。

提示：外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距。

實(shí)例

演示框模型：

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

親自試一試

元素的寬度和高度

為了在所有瀏覽器中正確設(shè)置元素的寬度和高度，我們需要了解框模型如何工作。

重要提示：使用 CSS 設(shè)置元素的 width 和 height 屬性時(shí)，只需設(shè)置內(nèi)容區(qū)域的寬度和高度。要計(jì)算元素的完整大小，還必須把內(nèi)邊距、邊框和外邊距加起來(lái)。

實(shí)例

<div> 元素的總寬度將是 350px：

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

親自試一試

計(jì)算如下：

320px(寬度)
+ 20px（左+右內(nèi)邊距）
+ 10px（左+右邊框）
+ 0px（左+右外邊距）
= 350px

元素的總寬度應(yīng)該這樣計(jì)算：

元素總寬度 = 寬度 + 左內(nèi)邊距 + 右內(nèi)邊距 + 左邊框 + 右邊框 + 左外邊距 + 右外邊距

元素的總高度應(yīng)該這樣計(jì)算：

元素總高度 = 高度 + 上內(nèi)邊距 + 下內(nèi)邊距 + 上邊框 + 下邊框 + 上外邊距 + 下外邊距

CSS 輪廓

輪廓是在元素周?chē)L制的一條線(xiàn)，在邊框之外，以凸顯元素。

CSS 擁有如下輪廓屬性：

outline-style

outline-color

outline-width

outline-offset

outline

注意：輪廓與邊框不同！不同之處在于：輪廓是在元素邊框之外繪制的，并且可能與其他內(nèi)容重疊。同樣，輪廓也不是元素尺寸的一部分；元素的總寬度和高度不受輪廓線(xiàn)寬度的影響。

CSS 輪廓樣式

outline-style 屬性指定輪廓的樣式，并可設(shè)置如下值：

dotted?- 定義點(diǎn)狀的輪廓。

dashed?- 定義虛線(xiàn)的輪廓。

solid?- 定義實(shí)線(xiàn)的輪廓。

double?- 定義雙線(xiàn)的輪廓。

groove?- 定義 3D 凹槽輪廓。

ridge?- 定義 3D 凸槽輪廓。

inset?- 定義 3D 凹邊輪廓。

outset?- 定義 3D 凸邊輪廓。

none?- 定義無(wú)輪廓。

hidden?- 定義隱藏的輪廓。

下例展示了不同的 outline-style 值：

實(shí)例

演示不同的輪廓樣式：

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;}

結(jié)果：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

親自試一試

注意：除非設(shè)置了?outline-style?屬性，否則其他輪廓屬性都不會(huì)有任何作用！

CSS 輪廓寬度

outline-width?屬性指定輪廓的寬度，并可設(shè)置如下值之一：

thin（通常為 1px）

medium（通常為 3px）

thick （通常為 5px）

特定尺寸（以 px、pt、cm、em 計(jì)）

下例展示了一些不同寬度的輪廓：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

實(shí)例

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

親自試一試

CSS 輪廓顏色

outline-color?屬性用于設(shè)置輪廓的顏色。

我們可以通過(guò)以下方式設(shè)置顏色：

name?- 指定顏色名，比如 "red"

HEX - 指定十六進(jìn)制值，比如 "#ff0000"

RGB - 指定 RGB 值，比如 "rgb(255,0,0)"

HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"

invert - 執(zhí)行顏色反轉(zhuǎn)（確保輪廓可見(jiàn)，無(wú)論是什么顏色背景）

下例展示了一些不同顏色的不同輪廓樣式。請(qǐng)注意，這些元素在輪廓內(nèi)還有黑色細(xì)邊框：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

實(shí)例

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

親自試一試

HEX 值

我們也可以使用十六進(jìn)制值（HEX）指定輪廓顏色：

實(shí)例

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* 紅色 */
}

親自試一試

RGB 值

或者通過(guò)使用 RGB 值：

實(shí)例

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* 紅色 */
}

親自試一試

HSL 值

當(dāng)然還可以使用 HSL 值：

實(shí)例

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* 紅色 */
}

親自試一試

可以在?CSS 顏色?章節(jié)中學(xué)習(xí)有關(guān) HEX、RGB 和 HSL 值的更多知識(shí)。

反轉(zhuǎn)顏色

下例使用?outline-color: invert，執(zhí)行了顏色反轉(zhuǎn)。這樣可以確保無(wú)論顏色背景如何，輪廓都是可見(jiàn)的：

反轉(zhuǎn)顏色的實(shí)線(xiàn)輪廓。

實(shí)例

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

親自試一試

CSS Outline - 簡(jiǎn)寫(xiě)屬性

outline?屬性是用于設(shè)置以下各個(gè)輪廓屬性的簡(jiǎn)寫(xiě)屬性：

outline-width

outline-style（必需）

outline-color

從上面的列表中，outline?屬性可指定一個(gè)、兩個(gè)或三個(gè)值。值的順序無(wú)關(guān)緊要。

下例展示了用簡(jiǎn)寫(xiě)的?outline?屬性指定的一些輪廓：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

實(shí)例

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

親自試一試

CSS 輪廓偏移

outline-offset?屬性在元素的輪廓與邊框之間添加空間。元素及其輪廓之間的空間是透明的。

下例指定邊框邊緣外 25px 的輪廓：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

實(shí)例

p {
  margin: 50px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

親自試一試

下例顯示元素與其輪廓之間的空間是透明的：

css邊框,CSS入門(mén)、進(jìn)階與實(shí)戰(zhàn),css,前端,html

實(shí)例

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

親自試一試

所有 CSS 輪廓屬性

屬性	描述
outline	簡(jiǎn)寫(xiě)屬性，在一條聲明中設(shè)置 outline-width、outline-style 以及 outline-color。
outline-color	設(shè)置輪廓的顏色。
outline-offset	指定輪廓與元素的邊緣或邊框之間的空間。
outline-style	設(shè)置輪廓的樣式。
outline-width	設(shè)置輪廓的寬度。

總結(jié)

本節(jié)我們學(xué)習(xí)了CSS邊框、邊距、輪廓的各種知識(shí)（邊框?qū)挾?顏色/各邊/簡(jiǎn)寫(xiě)屬性/圓角邊框/內(nèi)外邊距/高度寬度/框模型/輪廓寬度/顏色/屬性/偏移），強(qiáng)化了CSS邊框、邊距與輪廓的知識(shí)點(diǎn)，今后將繼續(xù)介紹CSS文本等知識(shí)點(diǎn)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-801514.html

到了這里，關(guān)于CSS邊框、邊距、輪廓（邊框?qū)挾?顏色/各邊/簡(jiǎn)寫(xiě)屬性/圓角邊框/內(nèi)外邊距/高度寬度/框模型/輪廓寬度/顏色/屬性/偏移）——萬(wàn)字長(zhǎng)文|一文搞懂的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶(hù)投稿，該文觀(guān)點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

10 CSS邊框?qū)傩?/a>
10 CSS邊框?qū)傩?border-style（邊框風(fēng)格）定義邊框的風(fēng)格，值可以有： border-style的值可以縮寫(xiě)的： border-style還可以單獨(dú)指定不同方向： border-width（邊框?qū)挾龋?使用border-width可以定義邊框的厚度，值可以是medium，thin，thick和指定數(shù)值的寬度。同時(shí)，border-width也可以進(jìn)行縮寫(xiě)：
2024年02月12日
瀏覽(14)
編程筆記 html5&css&js 041 CSS邊框?qū)傩?/a>
盒子是由四周的邊框組成，邊框的屬性就構(gòu)成了盒子的大部分樣式。 CSS border 屬性允許您指定元素邊框的樣式、寬度和顏色。 border-style 屬性指定要顯示的邊框類(lèi)型。允許以下值： border-style 屬性可以設(shè)置一到四個(gè)值（用于上邊框、右邊框、下邊框和左邊框）。注意：除非設(shè)
2024年01月19日
瀏覽(21)
微信小程序內(nèi)外邊距以及邊框
在微信小程序中設(shè)置內(nèi)外邊距和邊框可以使用 CSS 樣式來(lái)實(shí)現(xiàn)，具體如下：內(nèi)外邊距：通過(guò)設(shè)置 padding 和 margin 來(lái)控制元素的內(nèi)外邊距。例如，設(shè)置一個(gè) div 元素的內(nèi)外邊距為 10px：上面的代碼表示該 div 元素的內(nèi)外邊距都為 10px。在微信小程序中，可以使用padding來(lái)設(shè)置組件
2024年02月03日
瀏覽(20)
css中新型的邊框設(shè)置屬性border-inline
border-inline 是 CSS Logical Properties and Values 模塊中的一個(gè)屬性，用于控制元素在流內(nèi)（inline）方向上的邊框。該模塊旨在提供與書(shū)寫(xiě)模式（writing mode）無(wú)關(guān)的布局和樣式描述方式，使得元素在不同書(shū)寫(xiě)模式（如ltr、rtl、ttb等）下能夠統(tǒng)一、適當(dāng)?shù)靥幚磉吙?，它?border-block 的區(qū)別
2024年04月28日
瀏覽(23)
css第八課：文本屬性（字體，顏色屬性）
這一節(jié)我們要講的是文本屬性：文本屬性就是：?css樣式里的屬性，對(duì)文本的修飾，比如顏色，大小，字體，下劃線(xiàn)... 下圖是文本的一些屬性： 1.font-size和font-family屬性我們先來(lái)演示一下前兩個(gè)屬性：字體大小和字體類(lèi)型 ?結(jié)果： ?解釋?zhuān)何覀冞@里第一個(gè)p標(biāo)簽設(shè)置的css樣式
2024年02月06日
瀏覽(22)
【CSS】SVG圖片屬性及修改顏色
最近的開(kāi)發(fā)中遇到了SVG不能修改顏色的問(wèn)題，以前是直接用，沒(méi)有研究過(guò)，現(xiàn)在搞個(gè)筆記記錄下 width:設(shè)置最終SVG圖片的寬度 height:設(shè)置最終SVG圖片的高度 viewbox：視區(qū)，在svg上截取一塊，然后放大到整個(gè)svg圖片上，也就是上述所有最終的寬高 fill:設(shè)置顏色舉例：在上述的SV
2024年04月17日
瀏覽(47)
CSS3屬性詳解（一）文本盒模型中的 box-ssize 屬性處理兼容性問(wèn)題：私有前綴邊框背景屬性漸變前端開(kāi)發(fā)入門(mén)筆記（七）
CSS3是用于為HTML文檔添加樣式和布局的最新版本的層疊樣式表（Cascading Style Sheets）。下面是一些常用的CSS3屬性及其詳細(xì)解釋?zhuān)?border-radius：設(shè)置元素的邊框圓角的半徑?？梢允褂盟膫€(gè)值設(shè)置四個(gè)不同的圓角半徑，也可以只使用一個(gè)值來(lái)設(shè)置統(tǒng)一的圓角。 box-shadow：創(chuàng)建一個(gè)元
2024年02月08日
瀏覽(29)
【HTML 往日冒險(xiǎn) 01】標(biāo)簽元素屬性注釋文本格式化顏色 CSS
說(shuō)在前面 HTML 對(duì)于現(xiàn)在的我來(lái)說(shuō)，熟悉又陌生，熟悉的是其標(biāo)簽的結(jié)構(gòu)清晰，陌生的是其豐富的使用細(xì)節(jié)，長(zhǎng)期不使用難免會(huì)失去許多相關(guān)的記憶，但是不妨讓我們與W3school教程一同補(bǔ)全往日的冒險(xiǎn)日志…(主要是從中提煉關(guān)鍵的信息，具體的知識(shí)點(diǎn)還是參考相關(guān)手冊(cè)) 重新開(kāi)
2024年02月07日
瀏覽(23)
CSS3-盒子模型-邊距問(wèn)題
? ? 1 清除默認(rèn)內(nèi)外邊距 ? ? ? ? 場(chǎng)景：瀏覽器會(huì)默認(rèn)給部分標(biāo)簽設(shè)置默認(rèn)的margin和padding，但一般在項(xiàng)目開(kāi)始前需要先清除這些標(biāo)簽?zāi)J(rèn)的margin和padding，后續(xù)自己設(shè)置 ? ? ? ? ? ? 比如：body標(biāo)簽?zāi)J(rèn)有margin：8px、p標(biāo)簽?zāi)J(rèn)有上下的margin、ul標(biāo)簽?zāi)J(rèn)由上下的margin和padding-
2024年02月10日
瀏覽(21)
改進(jìn)的最大內(nèi)切圓算法求裂縫輪廓寬度
前段時(shí)間我將網(wǎng)上最大內(nèi)切圓算法進(jìn)行了代碼的整理，原先博主上傳的代碼稍微有點(diǎn)亂，可能也是它自己使用，大家可以看這篇整理好的：最大內(nèi)切圓算法計(jì)算裂縫寬度。一個(gè)圓與給定的多邊形或曲線(xiàn)的每一條邊或曲線(xiàn)都相切的圓。而我們就是需要計(jì)算的是給定圖像的輪廓的
2024年02月07日
瀏覽(34)

<xmp id="p4pvh"><var id="p4pvh"></var>