<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • css加邊框代碼(設置div邊框樣式)


    在本文中,我將介紹以下兩者之間的區別:

    • border
    • outline
    • box-shadow

    我們還將討論您何時可以使用另一種方法。

    CSS Box模型復習

    這三種邊框方法之間的一個關鍵區別是它們放置在元素的位置以及它們如何影響元素的維度,這種行為是由CSS box模型控制的。

    為元素添加邊框的3種CSS方法

    border 正是元素的邊界,位于其padding和margin之間,它的寬度將影響計算出的元素尺寸。

    outline 在邊框旁邊但在邊框之外,與 box-shadow 和 margin 重疊,但不影響元素的尺寸。

    默認情況下,box-shadow 從邊框的邊緣向外延伸,覆蓋定義方向的空間量,也不會影響元素的尺寸。

    border 語法和用法

    自網絡誕生之初,邊框就已經成為設計的標準。

    與我們將要介紹的其他兩種方法相比,一個重要的區別是,默認情況下,border 包含在元素的計算尺寸中。即使您設置 box-sizing:border-box,border 仍然會計入計算中。

    Border 最基本的語法定義了邊框的寬度和樣式:

    border: 3px solid;

    如果未定義則默認顏色為 currentColor,這意味著它將在級聯中使用最接近的顏色定義。

    但 border 有更多的樣式可供選擇,如果你愿意,使用 border-style 你可以為每一面定義不同的樣式。

    何時使用 border

    當元素的尺寸允許樣式計算時,border 是一個可靠的選擇(雙關語),默認樣式給了設計很大的靈活性。

    outline 語法和用法

    對于outline,使其可見的唯一必需屬性是提供一種樣式,因為默認值為 none:

    outline: solid;

    和border一樣,它將通過 currentColor 獲得顏色,它的默認寬度為 medium。

    outline 的典型應用是通過本機瀏覽器樣式對 :focus 元素(如鏈接和按鈕)進行聚焦。

    除非您能夠提供符合WCAG Success Criterion 2.4.7 Focus Visible的自定義 :focus 樣式,否則應該允許發生這種特定的應用,以達到無障礙的目的。

    出于設計目的,通常要注意的 outline 問題是它無法從任何 border-radius 樣式繼承曲線。

    何時使用 outline

    當您不想影響元素的尺寸并且不需要其遵循 border-radius 時,可以使用outline線。

    box-shadow 語法和用法

    box-shadow 的最低要求屬性是 x 和 y 軸的值以及顏色:

    box-shadow: 5px 8px black;

    可以選擇添加第三個參數 blur 來制造模糊,第四個參數 spread 來添加模糊擴散程度。

    要使用它來創建邊框,我們將 x 軸和 y 軸的值以及 blur 都設置為 0 ,然后為spread設置一個正數。

    box-shadow: 0 0 0 3px blue;

    這將在元素周圍創建邊框的外觀,甚至可以遵循所應用的 border-radius:

    為元素添加邊框的3種CSS方法

    何時使用box-shadow

    您可能更喜歡 box-shadow,特別是當您想為邊框設置動畫而不引起布局偏移時。下一節將演示這種情況的示例。

    而且由于 box-shadow可以分層,所以它是一個全能的好工具,要了解它來增強你的布局。

    但是,它將無法完全模仿 border 和 outline 提供的某些樣式。

    放在一起

    以下是一些可能需要使用 border 替代的實際情況。

    按鈕邊框

    當為有邊框和無邊框的按鈕提供樣式時,真實的 border 成為一個常見的問題,以及它們排列在一起的場景。

    為元素添加邊框的3種CSS方法

    典型的解決方案通常是將無邊框按鈕的尺寸增加到等于 border-width 的大小

    利用我們的新知識,另一種解決方案是使用 box-shadow 與 inset 關鍵字一起,將偽邊框視覺上置于按鈕內。

    為元素添加邊框的3種CSS方法

    請注意,你的 padding 必須大于 border-width,以防止文本內容的重疊。

    另外,也許您想在 :hover 或 :focus 上添加邊框。

    使用真實的邊框,你會從布局轉變中產生不理想的視覺跳躍,因為邊框會短暫地增加這些狀態下的尺寸。

    為元素添加邊框的3種CSS方法

    在這種情況下,我們可以使用 box-shadow 來創建偽邊框,這樣就不會增加真實的尺寸,另外我們還可以使用 transition 對其進行動畫處理。

    為元素添加邊框的3種CSS方法

    這是上述示例的簡化代碼:

    button {
      transition: box-shadow 180ms ease-in;
    }
    
    button:hover {
      box-shadow: 0 0 0 3px tomato;
    }

    確??梢娊裹c

    對于可訪問性,您可能不知道的一種情況是Windows高對比度模式(WHCM)的用戶。

    在這種模式下,你提供的顏色會被剝離成一個縮小的高對比度調色板,并非所有CSS屬性都是允許的,包括 box-shadow。

    一個實際的影響是,如果你在 :focus 時去掉了 outline,而用 box-shadow 代替,WHCM的用戶將不再獲得可見的焦點。

    要消除這種負面影響,您可以在 :focus 上應用透明的 outline:

    button:focus {
      outline: 2px solid transparent;
    }

    outline和box-shadow的陷阱

    因為outline和box-shadow位于盒模型的邊框之外,你可能會遇到的一個后果是讓它們在視口的邊緣下消失。所以,如果你想讓元素保持可見,你可能需要給元素添加 margin 或者給正文添加 padding 作為對策。

    它們的位置也意味著它們可以被 overflow: hidden 或使用 clip-path 等屬性剪掉。

    額外提示:漸變邊框

    正如承諾的那樣,這里有一個額外的提示——在我們已經討論過的方法中——只有 border 可以做到。

    一個經常被遺忘的 border 相關屬性是 border-image,當試圖將它用于實際的圖像時,其語法可能有點奇怪。

    但是它具有隱藏的功能——由于CSS漸變在技術上是圖像,因此它還可以創建漸變邊框:

    為元素添加邊框的3種CSS方法

    這需要定義一個規則的邊框寬度和樣式(盡管它只顯示為實體,而不考慮樣式值),然后是 border-image 屬性,它可以使用一個添加的漸變語法。在漸變之后的數字是 slice 值,對于我們的漸變,我們可以簡單地使用 1 來基本不改變漸變的大小/失真。

    div {
      border: 10px solid;
      /* simplified from preview image */
      border-image: linear-gradient(to right, purple, pink) 1;
    }

    如果只把邊框放在一邊,一定要先把其他邊框設置為零,否則有些瀏覽器還是會把邊框加到所有邊框上。

    div {
      border-style: solid;
      border-width: 0;
      border-left-width: 3px;
      /* border-image */
    }

    不利之處在于這些邊界不遵守 border-radius。

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费