成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS Hacks

kohoh_ / 3346人閱讀

摘要：持續(xù)補充解決高度崩塌解決高度崩塌將偽元素設(shè)置為塊元素添加到元素最后，然后對其清除浮動禁止換行禁止換行超出隱藏文字省略號禁止文字中斷空白不允許換行使用解決元素的基線問題使用解決元素的基線問題

CSS Hacks, 持續(xù)補充

解決 div 高度崩塌




  
  
  
  Testing

CSS 禁止換行

overflow: hidden; /* 超出隱藏 */
text-overflow: ellipsis; /* 文字省略號 */
word-break: keep-all; /* 禁止文字中斷 */
white-space: nowrap; /* 空白不允許換行 */

使用 vertical-align 解決 inline-block 元素的基線問題

display: inline-block;
vertical-align: top; /* 設(shè)置 vertical-align 的元素必須是內(nèi)聯(lián)元素 */

黑白圖片

img.desaturate {
  filter: grayscale(100%);
}

頁面頂部陰影

body:before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}

優(yōu)化顯示文本

html {
  text-rendering: optimizeLegibility;
}

文本漸變

  
.gradient[data-text] {
  position: relative;
}
.gradient[data-text]::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: red;
  -webkit-mask-image:  -webkit-gradient(linear, 0 bottom, 100 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}

模糊文本

.blur {
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

修改鼠標手勢

  • 以下是常用的：

    cursor: pointer | wait | hand | text | move | not-allowed;

  • 自定義圖片：

    cursor: url(cat.png), auto; /* 盡量在后面加上一般的手勢，以防自定義URL找不到時出現(xiàn)問題 */

currentColor

currentColor: 標識當前的標簽所繼承的文字顏色

  
鼠標來我這兒！
  .out-text {
    width: 50px;
    color: red;
  }
  .out-text:hover {
    color: green;
  }
  .inside-box {
    width: 50px;
    height: 50px;
    background-color: currentColor;
  }

修改Chrome默認滾動條樣式

  ::-webkit-scrollbar-track
  {
    border-radius: 10px;
    background-color: transparent;
  }

  ::-webkit-scrollbar
  {
    width: 0.25rem;
    height: 0.25rem;
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb
  {
    border-radius: 10px;
    background-color: rgba(153, 153, 153, .9);
    display: none; /* 默認隱藏滾動條 */
  }

  *:hover::-webkit-scrollbar-thumb {
    display: block; /* 當鼠標進入標簽時顯示滾動條 */
  }

設(shè)置圖片的高度與寬度相等

HTML:

CSS:

/* box css*/
.box {
  position: relative;
  width: 300px;
}
.box:before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* img */
.box img {
  position:  absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1840.html

相關(guān)文章

  • 瀏覽器的CSS Hacks

    摘要：我不再使用了，相反的是，我將使用的條件判斷將類應(yīng)用到標簽。但是，我想記錄我之前碰到過的每一個瀏覽器特定的選擇器和樣式屬性。我相信也沒有其他方式提供樣式表給獨特的利用這些，你能夠更好的針對和，代碼如下瀏覽器特定的綜合列表原文 我不再使用CSS Hacks了，相反的是，我將使用IE的條件判斷將類應(yīng)用到body標簽。 但是，我想記錄我之前碰到過的每一個瀏覽器特定的CSS 選擇器和樣式屬性。...

    lieeps 評論0 收藏0

  • Making An Indicator With Pure CSS

    摘要：注意此處的定位是以即的外沿框進行定位的。關(guān)于單位，這個單位代表的意思即，即瀏覽器可視區(qū)域的高度。，我們現(xiàn)在來看效果將會是下面這張圖片顯示的樣子。設(shè)置目的即讓的高度為，即到頂部的距離減去的距離。 簡單的說明一下，使用這個標題并不就是說要使用全英文來寫這篇文章，主要是實在想不到更好的叫法了，也不知道怎么樣能夠更好的翻譯成中文。 可以簡單地理解為：使用 CSS 來實現(xiàn)一個閱讀文章時的簡單的...

    church 評論0 收藏0

  • webpack 4.x學習使用總結(jié)

    摘要：最近一周一直都在折騰一些項目中常用的記錄下來，以后免去簡單的配置再去查文檔。常規(guī)入口指示應(yīng)該使用哪個模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始。把代碼轉(zhuǎn)換成，在使用語言中有介紹。擴展語法，使用下一代，在使用中有介紹。用于忽略部分文件。 最近一周一直都在折騰webpack,一些項目中常用的記錄下來，以后免去簡單的配置再去查文檔。 常規(guī) 1.入口 指示 webpack 應(yīng)該使用哪個模塊，來作為構(gòu)建...

    ls0609 評論0 收藏0

  • CSS hack合集

    摘要：本來已經(jīng)拋棄了，可是最近發(fā)現(xiàn)要考慮兼容性的網(wǎng)站還是有不少的，所以這兩天了解了一下，在這里簡單地總結(jié)一下合集參考資料全解，最齊全的方式講解 本來已經(jīng)拋棄IE6|7|8了，可是最近發(fā)現(xiàn)要考慮IE兼容性的網(wǎng)站還是有不少的，所以這兩天了解了一下CSS HACK，在這里簡單地總結(jié)一下！ CSS hack合集 參考資料： CSS Hacks css hack全解，最齊全的ie css hack方式...

    wenshi11019 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<