CSS 深入理解之 border 【筆記】

william 發布于2019-08-30 15:52 / 1184人閱讀

摘要：本文是對慕課網張鑫旭的課程深入理解之的學習筆記，并結合了一些個人理解。

本文是對慕課網張鑫旭的課程《CSS 深入理解之 border》的學習筆記，并結合了一些個人理解。

border-width 不支持百分比

border-width 不支持百分比單位，原因如下：

在實際設計中，邊框一般是固定大小的，不會隨著盒子寬度的增加而增加

margin 和 padding 為百分比單位時，是相對于 containing block 的寬度而言的

邊框相對于盒子寬度來說是很小的，如果像 padding、margin 那樣支持百分比單位，那么占的百分比數值也將會很小

同樣不支持百分比的還有 outline, box-shadow, text-shadow ...

border-width 支持的關鍵字有（數值對 IE8+ 有效, chrome 等不太一樣，因為標準對具體實現沒有規定）

thin: 1px

medium: 3px 默認值

為什么默認值是 3px 呢？因為border-style: double 至少要 3px 才有效果

thick: 5px

border-style

solid

dashed

chrome/firefox 和 IE 的虛線比例不一致

dotted

chrome/firefox 的點是方的，IE 的是圓的

可以用這個來實現 IE7、8下的圓角效果（鏈接請用 IE 打開）

double

雙線

雙線寬度永遠相等，中間空白寬度 ±1

可用于實現 menu 三道杠效果，上 border-style 是 double，下 border-style 是 solid。

兼容性好，不需要用偽元素

inset、outset、groove、ridge

不好看，一般不用

兼容性差

border-color 與 color

當沒有指定 border-color 的時候，會使用 color 作為邊框色

當需要邊框顏色和內容顏色一致時可以簡化代碼

類似的還有 box-shadow, text-shadow ...

border 與 background 定位

background 定位的局限：只能相對于容器的左上角定位，不能相對于右側定位

CSS2 是這樣，CSS3 支持（IE9+）

解決辦法：

多層標簽嵌套

使用 border

border-right: 50px solid transparent;
background: 100% 40px;

border 與圖形構建

border-style

dotted：IE7、8圓角

double：三道杠圖標

solid：三角、梯形

通過border-color: transparent

下拉按鈕、對話框、三角疊加形成更復雜圖形

用梯形拼合形成圓角效果，兼容性好

border 與透明邊框

支持 IE7+，兼容性好

使用

background 右側定位

三角圖形

增加單選/復選響應區域大小

用盒陰影實現邊框，原先的 border 變成透明來增加點擊區域

擴大渲染區域，drop-shadow

border 在布局中的應用

border 與等高布局

用 border 模擬一欄，將內容移至 border 內

缺點：不支持百分比寬度

云服務器 GPU云服務器深入理解webrtc之aec 深入理解系列深入理解linux 深入理解webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116432.html

【學習筆記】CSS深入理解之border

摘要：張鑫旭的深入理解之學習筆記不支持百分比，原因是邊框本身具有寬度固定的意義，不同設備的邊框不會因設備寬度而等比改變?？梢岳迷撎匦詫崿F圖標變色的效果與定位不計算區域，只限于以內的盒子。張鑫旭的CSS深入理解之border學習筆記 border-width border-width不支持百分比，原因是邊框本身具有寬度固定的意義，不同設備的邊框不會因設備寬度而等比改變。因此從語義上來說，...

he_xd 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之margin

摘要：張鑫旭的深入理解之學習筆記與容器的尺寸可視尺寸對于沒有設定的塊元素，可改變元素水平方向的可視尺寸占據尺寸對于元素，可改變元素水平垂直方向的占據尺寸與百分比單位普通元素的百分比都是相對于容器的寬度計算的絕對定位元素的百分比是相對于包含塊的寬張鑫旭的CSS深入理解之margin學習筆記 margin與容器的尺寸可視尺寸：對于沒有設定width的塊元素，margin可改變元素水平方向...

stefan 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之padding

摘要：張鑫旭的深入理解之學習筆記與容器的尺寸元素值過大，一定影響元素尺寸為定值，會影響元素尺寸為或者為，同時值沒有暴走，不影響元素尺寸元素水平影響尺寸，垂直不影響尺寸，但是會影響占據空間會顯示背景色負值與百分比單位不支持負值百分比相對于自身寬張鑫旭的CSS深入理解之padding學習筆記 padding與容器的尺寸 block元素 padding值過大，一定影響元素尺寸 width為定...

learn_shifeng 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之z-index

摘要：張鑫旭的深入理解之學習筆記層疊上下文什么是層疊上下文在軸上延伸出一個層級，離父級層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。張鑫旭的CSS深入理解之z-index學習筆記層疊上下文什么是層疊上下文？在z軸上延伸出一個層級，離父級層疊上下文的頂部更近。如何產生層疊上下文？根元素具有根層疊上下文 z-index不為auto的定位元素一個 z-index 值不為 ...

Steven 2019-08-30 15:54 評論0 收藏0
css揭秘筆記——形狀

摘要：把改成，就變成了這樣實現邊框內圓角多重邊框還有下實現多重背景為某一層背景單獨設置類似這樣的屬性等等。裁切路徑方案這種方案，當內邊距不夠寬時，會裁切掉文本。自適應的橢圓（border-radius的用法）單獨指定水平和垂直半徑長寬固定的元素，可以通過指定寬高的一半，變為橢圓形，格式為兩個值用/分開。 width: 100px; height: 80px; border-radi...

dantezhao 2019-08-29 13:47 評論0 收藏0