CSS揭祕之多重邊框

時間 2019-11-09

標籤 css 揭祕多重邊框欄目 CSS 简体版

原文原文鏈接

多重邊框的兩種實現方案：css

border-shadow
outline

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mutiple border</title>
</head>

<body>
    <style>
        .common {
            width: 25vw;
            height: 20vh;
            margin: 10%;
            background: gray;
        }

        .box-shadow {
            box-shadow: 0 0 0 10px #655,
                0 0 0 15px deeppink,
                0px 2px 5px 15px hsla(240, 100%, 50%, .5);
        }

        .inner-box-shadow {
            background: white;
            box-shadow: inset 0 0 40px hsla(0, 100%, 50%, 1);
        }

        .outline {
            border: 2px solid hsla(280, 100%, 50%, 1);
            outline: 2px dashed hsla(0, 0%, 100%, 1);
            outline-offset: -15px;
            border-radius: 10px;
            outline-width: 2px;
        }
    </style>
    <div class="common box-shadow"></div>
    <div class="common inner-box-shadow"></div>
    <div class="common outline"></div>
</body>

</html>

box-shadow

以由逗號分隔的列表來描述一個或多個陰影效果。該屬性可讓幾乎全部元素的邊框產生陰影。若是元素同時設置了 border-radius ，陰影也會有圓角效果。多個陰影的z-ordering 和多個 text shadows 規則相同(第一個陰影在最上面)。html

/* x偏移量 | y偏移量 | 陰影顏色 */
box-shadow:60px -16px teal;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插頁(陰影向內) | x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: inset 5em 1em gold;

/* 任意數量的陰影，以逗號分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局關鍵字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

指定單個 box-shadow 的用法：瀏覽器

給出兩個、三個或四個數字值的狀況。ui
- 若是隻給出兩個值, 這兩個值將被瀏覽器解釋爲x軸上的偏移量 <offset-x> 和y軸上的偏移量 <offset-y>。
- 若是給出了第三個值, 這第三個值將被解釋爲模糊半徑的大小 <blur-radius>。
- 若是給出了第四個值, 這第四個值將被解釋爲擴展半徑的大小 <spread-radius>。
可選，插頁(陰影向內) inset。
可選，顏色值 <color>。
聲明多個shadows時，用逗號將shadows隔開。

outline

CSS的outline屬性是用來設置一個或多個單獨的輪廓屬性的簡寫屬性，例如 outline-style, outline-width 和 outline-color。多數狀況下，簡寫屬性更加可取和便捷。code

輪廓與邊框在如下幾個方面存在不一樣：htm

輪廓不佔據空間，它們被描繪於內容之上；
輪廓能夠是非矩形的。在Gecko/Firefox中，輪廓是矩形的，可是Opera則會圍繞元素結構繪製非矩形的形狀；

/* 寬度 | 樣式 | 顏色 */
outline: 1px solid white;

outline-offset ：用於設置 outline 與一個元素邊緣或邊框之間的間隙。繼承

outline是元素的輪廓，懸浮在元素邊框之上。元素和其輪廓之間是透明的。也就是說，它們之間的顏色會繼承父元素的背景色。ip

/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;

/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。