最近2019年好看中文字幕视频,国产suv精品一区二人妻,国产人妻久久精品二区三区特黄

CSS Secret 實用技術精華

0. 自適應按鈕

將長度值都改成 em 單位，按鈕效果的值就變成可縮放（依賴于父元素字號）。
把半透明的黑色或白色疊加在主色調上（ border background box-shadow text-shadow ），即可產生主色調的亮色和暗色變體。

websecret01.png

button {
    padding: .3em .8em; 
    border: 1px solid rgba(0,0,0,.1); 
    background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); 
    border-radius: .2em; 
    box-shadow: 0 .05em .25em rgba(0,0,0,.5); 
    color: white; 
    text-shadow: 0 -.05em .05em rgba(0,0,0,.5); 
    font-size: 125%; 
    line-height: 1.5;
}

button.cancel { 
    background-color: #c00; 
} 
 
button.ok { 
    background-color: #6b0; 
}

推薦使用HSLA而不是RGBA來產生半透明的白色，因為它的字符長度更短，敲起來也更快。

1. background-clip屬性

background-clip:border-box：背景會延伸到邊框所在的區域下層，背景會被元素的 border box
（邊框的外沿框）裁切掉
background-clip:padding-box：瀏覽器會用內邊距的外沿來把背景裁切掉，用這種方法可以實現半透明邊框

websecret02.png

border: 10px solid hsla(0,0%,100%,.5); 
background: white; 
background-clip: padding-box;

2. 多重邊框

websecret03.png

box-shadow 方案（實線邊框）

box-shadow 設置正值的擴張半徑加上兩個為零的偏移量以及為零的模糊值，得到的投影其實就像一道實線邊框；它支持逗號分隔語法，可以創建任意數量的投影。

<!-- 單邊框 -->
background: yellowgreen; 
box-shadow: 0 0 0 10px #655;

<!-- 雙邊框 -->
background: yellowgreen; 
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

<!-- 三邊框 -->
background: yellowgreen; 
box-shadow: 0 0 0 10px #655, 
            0 0 0 15px deeppink, 
            0 2px 5px 15px rgba(0,0,0,.6);

投影跟邊框不同，其不影響布局，也不會受到 box-sizing 屬性的影響。可以通過內邊距或外邊距來模擬出邊框所需要占據的空間。

上述方法所創建出的假邊框在外圈，不響應鼠標事件，比如懸停或點擊。如果需要鼠標事件，可以給 box-shadow 屬性加上 inset 屬性，使投影在內圈。
請注意，此時需要增加額外的內邊距來騰出足夠的空隙。

outline 方案（虛線邊框）

可以通過 outline-offset 屬性來控制它跟元素邊緣之間的間距，這個屬性甚至可以接受負值。只適用于雙層邊框的場景，因為 outline 并不能
接受用逗號分隔的多個值。如果我們需要獲得更多層的邊框，前一種方案就是我們唯一的選擇了。邊框不一定會貼合 border-radius 屬性產生的圓角，因此如果元素
是圓角的，它的描邊可能還是直角的。

<!-- 雙邊框 -->
background: yellowgreen; 
border: 10px solid #655; 
outline: 5px solid deeppink;

<!-- 內虛線 -->
width: 100px;
height: 60px;
background: #655;
border: 10px solid #655;
outline: 1px dashed #fff;
outline-offset: -11px;
border-radius: 5px;

3. 靈活的背景定位

background-position 的擴展語法方案

在偏移量前面指定關鍵字即可

background: url(code-pirate.svg) no-repeat #58a; 
background-position: right 20px bottom 10px;

background-origin 方案

默認情況下，background-position 是以 padding box 為準的，因此 top left 默認指的是 padding box 的左上
角。設置 background-origin 屬性為 content-box， background-position 就會以內容區的邊緣作為基準。

padding: 10px; 
background: url("code-pirate.svg") no-repeat #58a 
            bottom right; /* 或 100% 100% */ 
background-origin: content-box;

calc 方案

background: url("code-pirate.svg") no-repeat; 
background-position: calc(100% - 20px) calc(100% - 10px);

請不要忘記在 calc() 函數內部的- 和+ 運算符的兩側各加一個空白符，否則會產生解析錯誤！

4. 邊框內圓角

websecret04.png

background: tan; 
border-radius: .8em; 
padding: 1em; 
box-shadow: 0 0 0 .6em #655; 
outline: .6em solid #655;

5. 條紋背景

水平條紋

通過設置漸變的起止點來創建條紋背景，其原理就是起始點等于終止點。

websecret05.png

<!-- T1 未設置漸變起止點 -->
background: linear-gradient(#fb3, #58a);

<!-- T2 設置漸變開始于30%終止與70%-->
background: linear-gradient(#fb3 30%, #58a 70%);

<!-- T3 起始點等于終止點-->
background: linear-gradient(#fb3 50%, #58a 50%);

<!-- T4 平鋪-->
background: linear-gradient(#fb3 50%, #58a 50%); 
background-size: 100% 20px;

<!-- T5 不等寬平鋪-->
background: linear-gradient(#fb3 30%, #58a 30%); 
background-size: 100% 20px;

<!-- T5 三色條紋-->
background: linear-gradient(#fb3 33.3%, 
            #58a 0, #58a 66.6%, yellowgreen 0); 
background-size: 100% 30px;

如果我們把第二個色標的位置值設置為 0，那它的位置就總是會被前一個位置值代替，即background: linear-gradient(#fb3 30%, #58a 0); 等價于 background: linear-gradient(#fb3 30%, #58a 30%);

垂直條紋 & 斜線條紋

垂直條紋：修改參數 to right 并且顛倒 background-size 參數
斜向條紋：增加色標到4個，并且改變寬度
斜線條紋平鋪：使用 repeating-radial-gradient() 函數

websecret06.png

<!-- T1 三色條紋 -->
    background: linear-gradient(to right, #fb3 50%, #58a 0);
    background-size: 30px 100%;

<!-- T2 旋轉45度 -->
    background: linear-gradient(45deg, #fb3 50%, #58a 0);
    background-size: 30px 30px;

<!-- T2 增加色標到4個  -->
    background: linear-gradient( 45deg, #fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
    background-size: 30px 30px;

<!-- T2 增加色標到4個，并且增加寬度  -->
    background: linear-gradient( 45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
    background-size: 42.426406871px 42.426406871px;

<!-- T2 使用repeating-linear-gradient參數  -->
    background: repeating-linear-gradient( 45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

<!-- T2 使用半透明白色的條紋疊加在背景色之上來得到淺色條紋  -->
    background: #58a;
    background-image: repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px);

6. 復雜的背景圖案

見 lea.verou.me/css3patterns 展示

7. 偽隨機背景

略

8. 連續的圖像邊框

老式信封樣式的邊框：把 background 設置為 padding-box ，通過 background-size 屬性來改變條紋的寬度，通過 border 屬性來改變整個邊框的厚度
螞蟻行軍邊框：把條紋轉變為黑白兩色，并把邊框的寬度減少至 1px，然后再把 background-size 改為合適的值，最后把 background-position 以動畫的方式改變為 100%

websecret07.png

<!-- T1 老式信封樣式的邊框 -->
padding: 1em; 
border: 1em solid transparent; 
background: linear-gradient(white, white) padding-box, 
            repeating-linear-gradient(-45deg, 
              red 0, red 12.5%, 
              transparent 0, transparent 25%, 
              #58a 0, #58a 37.5%, 
              transparent 0, transparent 50%) 
             0 / 5em 5em;

<!-- T2 螞蟻行軍邊框 -->
@keyframes ants { to { background-position: 100% } } 

.marching-ants {
    padding: .5em; 
    border: 1px solid transparent; 
    background: 
        linear-gradient(#666, #666) padding-box, 
        repeating-linear-gradient(-45deg, 
          black 0, black 25%, white 0, white 50% 
        ) 0 / .6em .6em; 
    animation: ants 12s linear infinite; 
}

9. 自適應的橢圓

websecret08.png

<!-- 半橢圓 -->
    border-radius: 50% / 100% 100% 0 0;
    border: 10px solid #ff6666;
    background: #ff6666;

<!-- 半橢圓 -->
    border-radius: 100% 0 0 100% / 50%;
    border: 10px solid #ff6666;
    background: #ff6666;
}

<!--1/4橢圓 -->
    border-radius: 100% 0 0 0;
    border: 10px solid #ff6666;
    background: #ff6666;

10. 平行四邊形

把所有樣式（背景、邊框等）應用到偽元素上，然后再對偽元素進行變形
給宿主元素應用 position: relative 樣式，并為偽元素設置 position: absolute，然后再把所有偏移量設置為零，以便讓它在水平和垂直方向上都被拉伸至宿主元素的尺寸

websecret09.png

11. 菱形圖片

websecret10.png

<!-- html代碼 -->
<div class="pic">
    ![](#)
</div>

<!-- css代碼  -->
.pic { 
    width: 100px; 
    height: 100px;
    transform: rotate(45deg); 
    overflow: hidden; 
} 
.pic > img { 
    max-width: 100%; 
    transform: rotate(-45deg) scale(1.42); 
    width: 100px;
    height: 100px;
    background: #666;
}

12. 切角效果

使用漸變加上45度角來模擬

websecret11.png

<!-- 單切角  -->
    background: linear-gradient(-45deg, transparent 10px, #58a 0);

<!-- 雙切角  -->
    background: linear-gradient(-45deg, transparent 10px, #58a 0)  right, 
    linear-gradient(45deg, transparent 10px, #58a 0)  left;
    background-size: 50% 100%;
    background-repeat: no-repeat;

<!-- 4切角  -->
    background: linear-gradient(135deg, transparent 10px, #58a 0)  top left, 
    linear-gradient(-135deg, transparent 10px, #58a 0) top right, 
    linear-gradient(-45deg, transparent 10px, #58a 0) bottom right, 
    linear-gradient(45deg, transparent 10px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

13. 梯形標簽頁

websecret12.png

.nav1 > a { 
    position: relative; 
    display: inline-block; 
    padding: 1em 1em 0.3em; 
} 
.nav1 > a::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #666;
    border-radius: .5em .5em 0 0;
    transform: perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}

.nav2 > a { 
    position: relative; 
    display: inline-block; 
    padding: 1em 1em 0.3em; 
} 
.nav2 > a::before { 
    content: ''; 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    z-index: -1; 
    background: #ccc; 
    background-image: linear-gradient( hsla(0,0%,100%,.6), hsla(0,0%,100%,0)); 
    border: 1px solid rgba(0,0,0,.4); 
    border-radius: .5em .5em 0 0; 
    box-shadow: 0 .15em white inset; 
    transform: perspective(.5em) rotateX(5deg); 
    transform-origin: bottom; 
}

14. 簡單的餅圖

略

15. 單側投影

box-shadow: x-offset y-offset blur expand-radius color

websecret13.png

<!-- 普通 三參數 -->
.shadow-org {
    box-shadow: 2px 3px 4px rgba(0,0,0,.5)
}

<!-- 單側 四參數 -->
.shadow-sig {
    box-shadow: 0 5px 4px -4px black;
}

<!-- 雙側投影 -->
.shadow-both {
    box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
}

16. 不規則投影

略

17. 染色效果

略

18. 毛玻璃效果

將box容器和filter元素的背景都設置為同一張圖片；
設置filter元素的 position: relative; overflow: hidden; z-index: 0;
設置filter元素的偽元素before為絕對定位，并且大小與其相等，加上blur濾鏡，同時設置margin為一個較大的負值，最后將其z-index設置為負；

websecret15.png

.box, .filter:before {
    background: url("../img/bak.jpg") 0 / cover fixed; 
}

.box {
    height: 300px;
    width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.filter {
    width: 300px;
    height: 200px;
    position: relative; 
    overflow: hidden; 
    z-index: 0;
}

.filter:before { 
    content: ' '; 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    filter: blur(20px); 
    margin: -30px; 
    z-index: -1;
}

19. 折角效果

websecret16.png

.box .note1, .box .note2 {
    width: 200px;
    height: 100px;
}

.note1 { 
    position: relative; 
    background: #58a; /* 回退樣式 */ 
    background: 
        linear-gradient(-150deg, 
            transparent 1.5em, #58a 0); 
    border-radius: .5em; 
} 
.note1::before { 
    content: ''; 
    position: absolute; 
    top: 0; right: 0; 
    background: linear-gradient(to left bottom, 
        transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 
        100% 0 no-repeat; 
    width: 1.73em; 
    height: 3em; 
    transform: translateY(-1.3em) rotate(-30deg); 
    transform-origin: bottom right; 
    border-bottom-left-radius: inherit; 
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15); 
}

.note2 {
    background: #08a;
    background: 
    linear-gradient(to left bottom, 
        transparent 50%, rgba(0,0,0,.4) 0) 
        no-repeat 100% 0 / 2em 2em, 
    linear-gradient(-135deg, 
        transparent 1.5em, #58a 0);
    @include a(#ff7700);
}

// 最終包裝成函數
@mixin folded-corner($background, $size, 
                     $angle: 30deg) { 
position: relative; 
background: $background; /* 回退樣式 */ 
background: 
    linear-gradient($angle - 180deg, 
        transparent $size, $background 0); 
border-radius: .5em; 
 
$x: $size / sin($angle); 
$y: $size / cos($angle); 
 
&::before { 
    content: ''; 
    position: absolute; 
    top: 0; right: 0; 
    background: linear-gradient(to left bottom, 
        transparent 50%, rgba(0,0,0,.2) 0, 
        rgba(0,0,0,.4)) 100% 0 no-repeat; 
    width: $y; height: $x; 
    transform: translateY($y - $x) 
               rotate(2*$angle - 90deg); 
    transform-origin: bottom right; 
    border-bottom-left-radius: inherit; 
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.
} 
} 
 
/* 當調用時... */ 
.note { 
    @include folded-corner(#58a, 2em, 40deg); 
}

20. 連字符斷行

hyphens: auto;

21. 插入換行

通過"\000A"或簡化為"\A"來設置換行
設置 white-space: pre 保留源代碼中的空白符和換行
通過 dt:not(:?rst-child) 或者 dt ~ dt 或者 dd + dt 定義換行

websecret17.png

.box {
    background: #58a;
    color: #fff;
    padding: 20px;
    width: 300px;
    border-radius: 5px;
}

dt, dd { 
    display: inline; 
    margin: 0
}

dd + dt::before { 
    content: '\A'; 
    white-space: pre; 
} 
 
dd + dd::before { 
    content: ', '; 
    font-weight: normal; 
}

22. 文本行的斑馬條紋

websecret18.png

textarea {
    padding: 0;
    line-height: 1.55;
    background: #eee;
    background-size: auto 3em;
    background-origin: content-box;
    background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}

23. 調整 tab 的寬度

pre { 
    tab-size: 2; 
}

24. 連字

略

25. 華麗的 & 符號

略

26. 自定義下劃線

略

27. 現實中的文字效果

略

28. 環形文字

略

29. 選用合適的鼠標光標

略

30. 擴大可點擊區域

略

31. 自定義復選框

websecret21.png

input[type="checkbox"] { 
    position: absolute; 
    clip: rect(0,0,0,0); 
}
input[type="checkbox"] + label::before { 
    content: '\a0'; /* 不換行空格 */ 
    display: inline-block; 
    vertical-align: .2em; 
    width: 1em; 
    height: 1em; 
    margin-right: .5em; 
    border-radius: .2em; 
    background: silver; 
    text-indent: .15em; 
    line-height: .65; 
}
input[type="checkbox"]:checked + label::before { 
    content: '\2713'; 
    background: yellowgreen; 
}

32. 通過陰影來弱化背景

沒有給出完美方案

33. 通過模糊來弱化背景

略

34. 滾動提示

略

36. 自適應內部元素

通過 min-content 設置容器內部最大的不可斷行元素的寬度（即最寬的單詞、圖片或具有固定寬度的盒元素）

websecret19.png

figure { 
    max-width: 300px; 
    max-width: min-content; 
    margin: auto; 
}

37. 精確控制表格列寬

對table-layout增加顯示的可控性

table { 
    table-layout: fixed; 
    width: 100%; 
}

38. 根據兄弟元素的數量來設置

:only-child 等價于 :?rst-child:last-child ，即第一項同時也是最后一項
:last-child 等價于 :nth-last-child(1)

找到某元素即是父元素的第一個子元素，同時也是從后往前數的第N個子元素
用兄弟選擇符（~）來命中它之后的所有兄弟元素：相當于在這個列表正好包含N個列表項
時，命中它的每一項

li:first-child:nth-last-child(n), 
li:first-child:nth-last-child(n) ~ li { 
    /* 當列表正好包含n項時，命中所有列表項 */ 
}

39. 滿幅的背景，定寬的內容

websecret20.png

<!-- html代碼 -->
<footer> 
    <p>The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer. </p>
</footer>

<!-- css代碼 -->
footer {
    background: #333; 
    color: #fff;
    padding: 1em calc(50% - 450px); 
}

footer p {
    text-align: center;
}

40. 垂直居中

通過 translate() 變形函數實現平移
通過視口單位 vh vw 實現相對于視口的相對位置

websecret14.png

<!-- html代碼  -->
    <main> 
        <h1>Am I centered yet?</h1> 
        <p>Center me, please!</p> 
    </main>

<!-- translate()方法 -->
main { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: #ff9900;
    padding: 10px;
}

<!-- vh&vw方法 -->
main { 
    width: 18em; 
    padding: 1em 1.5em; 
    margin: 50vh auto 0; 
    transform: translateY(-50%); 
}

41. 緊貼底部的頁腳

<!-- html代碼 -->
<div class="main">...</div>
<footer></footer>

<!-- css代碼 -->
body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh; 
} 
main { flex: 1; }

42. 緩動效果

略

43. 逐幀動畫

略

44. 閃爍效果

略

45. 打字動畫

略

46. 狀態平滑的動畫

略

47. 沿環形路徑平移的動畫

略

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

CSS Secret 實用技術精華

CSS Secret 實用技術精華

0. 自適應按鈕

1. background-clip屬性

2. 多重邊框

box-shadow 方案 （實線邊框）

outline 方案 （虛線邊框）

3. 靈活的背景定位

background-position 的擴展語法方案

background-origin 方案

calc 方案

4. 邊框內圓角

5. 條紋背景

水平條紋

6. 復雜的背景圖案

7. 偽隨機背景

8. 連續的圖像邊框

9. 自適應的橢圓

10. 平行四邊形

11. 菱形圖片

12. 切角效果

13. 梯形標簽頁

14. 簡單的餅圖

15. 單側投影

16. 不規則投影

17. 染色效果

18. 毛玻璃效果

19. 折角效果

20. 連字符斷行

21. 插入換行

22. 文本行的斑馬條紋

23. 調整 tab 的寬度

24. 連字

25. 華麗的 & 符號

26. 自定義下劃線

27. 現實中的文字效果

28. 環形文字

29. 選用合適的鼠標光標

30. 擴大可點擊區域

31. 自定義復選框

32. 通過陰影來弱化背景

33. 通過模糊來弱化背景

34. 滾動提示

36. 自適應內部元素

37. 精確控制表格列寬

38. 根據兄弟元素的數量來設置

39. 滿幅的背景，定寬的內容

40. 垂直居中

41. 緊貼底部的頁腳

42. 緩動效果

43. 逐幀動畫

44. 閃爍效果

45. 打字動畫

46. 狀態平滑的動畫

47. 沿環形路徑平移的動畫

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

box-shadow 方案（實線邊框）

outline 方案（虛線邊框）