知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    css黑科技

    作者:佳明媽 來源:未知 2017-02-09 人氣:
    當我們面對一些需求的時候可能會問自己能不能只使用 css 完成它,而不用 javascript。最新的 css 屬性跟功能能夠簡單快速的解決很多老問題。 本文總結了 50 多個很有趣的的 css 屬性和值

    當我們面對一些需求的時候可能會問自己能不能只使用 css 完成它,而不用 javascript。最新的 css 屬性跟功能能夠簡單快速的解決很多老問題。

    本文總結了 50 多個很有趣的的 css 屬性和值,我會簡單的介紹他們的用法并提供示例。其中有一些屬性目前是試驗屬性,相信隨著瀏覽器和css標準的發展以后會很快被普遍支持。我還會介紹一些常用屬性的鮮為人知的值,可能可以幫助你加深對這些屬性的印象。同時文中還會提及一些瀏覽器特性。

    目錄

    all

    all屬性可以重置把元素的其他所有屬性重置為默認屬性。它包括以下3個值:

    • initial: 修改所有元素屬性或父元素的值為其初始化值
    • inherit: 修改所有元素屬性或父元素的值為其父元素的值
    • unset: 修改所有元素屬性或父元素的值為其父元素的值(如果有繼承)或其初始值

    shape-outside 的更多內容建議參閱這篇文章:css shape-outside 總結

    @supports

    這個 CSS 語句該語句可以用來做特性查詢,檢測當前瀏覽器是否支持某些屬性。

     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    @supports (display: grid) {
      .container {
        display: grid;
      }
    }            
     
    @supports (image-rendering) {
      img {
        image-rendering: pixelated;
      }
    }
     

    你也可以同時檢測多種屬性:

     
    1
    2
    3
    4
    5
     
    @supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) {
     
    }
     

    var()

    該功能讓我們可以像 Less、Sass 一樣定義變量。我們通過--* 的方式來創建一個CSS變量,并通過var(--foo) 的方式來引用一個變量(大小寫敏感哦)。例如:

     
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    :root {
        --brand-primary: #cccccc;
    }
     
    body {
        background-color: var(--brand-primary);
    }
     

    var() 還可以接受第二個參數,表示備選參數,第一個參數獲取失敗的時候,它就生效了。

     
    1
    2
    3
    4
    5
     
    body {
      color: var(--primary-color, #cccccc);
    }
     

    目前 IE11、Edge14 和 Opera mini 都還不支持該屬性,Edge15 將會提供支持。

    table-layout

    該屬性屬性定義了表格布局算法,用于對表格中單元格、行和列進行布局。如果你需要讓表格內的所有格的寬度都一樣,那這個屬性對你很有用。

     
    1
    2
    3
    4
    5
     
    table {
      table-layout: fixed;
    }
     

    該屬性更詳細的內容請參閱Fixed Table Layouts

    text-transform

    該屬性可以讓文本變成小寫(lowercase)或大寫(uppercase),你也可以通過capitalize來單獨對每一個單詞進行操作。

    transition-timing-function

    該屬性定義緩動元素的過渡曲線,例如ease-in或ease-out,不過它有兩個值可能很少人了解:

    • steps(n, start|end): 關鍵字ease這種能實現平滑過渡動畫,而stepes可以實現分步過渡,第一個參數必須是正整數,定義動畫在第幾步(幀)完成;第二個參數可選,接受 start 和 end 兩個值,指定在每個間隔的起點或是終點發生階躍變化,默認為 end。該值可以簡寫為step-start(n)和step-end(n)
    • cubic-bezier(n, n, n, n): 定義你自己的貝塞爾過渡曲線。

    vh, vw, vmin, vmax

    這些單位被用來計算視口大小(viewport size)。

    • vh: 1vh 是 1/100 的視口高度。
    • vw: 1vw 是 1/100 的視口寬度
    • vmin: vh 和 vw 的最小值。
    • vmax: vh 和 vw 的最大值。

    例如瀏覽器的視口大小為 1280*655px,1vh 就等于 6.55px,1vw 等于 12.8px,vmin 是 6.55px(兩者間的最小值),vmax 是 12.8px(兩者間的最大值)。

    white-space

    該屬性是用來設置如何處理元素中的空白。

    • normal: 連續的空白符會被合并,換行符會被當作空白符來處理。填充line盒子時,必要的話會換行。
    • nowrap: 和 normal 一樣,連續的空白符會被合并。但文本內的換行無效。
    • pre: 連續的空白符會被保留。在遇到換行符或者
      元素時才會換行。
    • pre-wrap: 連續的空白符會被保留。在遇到換行符或者
      元素,或者需要為了填充line盒子時才會換行。
    • pre-line: 連續的空白符會被合并。在遇到換行符或者
      元素,或者需要為了填充line盒子時會換行。

    word-break

    該屬性指定怎樣在單詞內斷行

    • normal: 使用默認的斷行規則。
    • break-all: 對于non-CJK (中文/日文/韓文) 文本,可在任意字符間斷行。
    • keep-all: CJK 文本不斷行。 Non-CJK 文本表現同 normal。

    word-spacing

    跟letter-spacing差不多,不過這個是處理詞間距,你可以用這個值增加(或減少)兩個單詞之間的距離。它的默認值是normal,一般為 0.25em。

    will-change

    這個屬性是告訴瀏覽器該元素要變化了,這樣瀏覽器可以在元素屬性真正發生變化之前提前做好對應的優化準備工作。 這種優化可以將一部分復雜的計算工作提前準備好,使頁面的反應更為快速靈敏。

    • normal: 瀏覽器執行默認優化。
    • scroll-position: 表示開發者希望在不久后改變滾動條的位置或者使之產生動畫。
    • content: 表示開發者希望在不久后改變元素內容中的某些東西,或者使它們產生動畫。

    也可以指定明確的屬性表示要變化的內容:

     
    1
    2
    3
    4
    5
     
    .will-be-animated {
      will-change: top, left;
    }
     

    在這個屬性出現之前,我們通常使用下面的小技巧提高元素的動畫性能(這樣可以讓元素動畫通過 GPU 計算) :

     
    1
    2
    3
    4
    5
     
    .will-be-animated {
      transform: translate3d(0, 0, 0);
    }
     

    深入了解該屬性請參考 MDN will-change 詞條

    writing-mode

    該屬性控制文本是橫向顯示還是豎向顯示。

    • horizontal-tb: 內容橫向、從上至下顯示。
    • vertical-rl: 內容豎向、從右至左顯示。
    • vertical-lr: 內容豎向、從左至右顯示。

    :-webkit-autofill

    該選擇器會選擇被瀏覽器自動填充的 input 元素(比如自動填充了賬號密碼等)。它給了你一個機會讓你能改變這些被自動填充的 input 的樣式。在 Chrome 里這些 input 默認是黃色背景。

    -webkit-overflow-scrolling

    該屬性讓我們能在 IOS 設備上實現元素內部的彈性滾動。它有兩個值:

    • auto: 使用普通滾動,在 IOS 里會有中齒輪感。
    • normal: 使用彈性滾動。

    -webkit-touch-callout

    該屬性能隱藏 IOS 設備上默認出現的呼出。例如當你按住某個目標時出現的浮動控制菜單。

    • none: 不顯示呼出。
    • default: 顯示呼出。

    -webkit-scrollbar

    隱藏元素的滾動條。

     
    1
    2
    3
    4
    5
     
    #container::-webkit-scrollbar {
      display: none;
    }
     

    在 IE10 和 Edga 中使用以下方法:

     
    1
    2
    3
    4
    5
     
    html {
      -ms-overflow-style: ms-autohiding-scrollbar;
    }
     

    Animatable

    這里有個 CSS 中所有可以被動畫的屬性的列表。我們常常給透明度(opacity)、背景顏色(background-color)等等屬性添加動畫。其實也可以其他一些屬性添加動畫,例如 letter-spacing。

     

    原文:http://www.ferecord.com/lets-look-50-interesting-css-properties-values.html
    http://www.ferecord.com/lets-look-50-interesting-css-properties-values.html


    ↓ 查看全文

    css黑科技由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    css黑科技-最新評論

    福利彩票排列7走势图