国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS Hacks

kohoh_ / 3336人閱讀

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

CSS Hacks, 持續補充

解決 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; /* 設置 vertical-align 的元素必須是內聯元素 */

黑白圖片

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);
}

優化顯示文本

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找不到時出現問題 */

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; /* 當鼠標進入標簽時顯示滾動條 */
  }

設置圖片的高度與寬度相等

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;
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1840.html

相關文章

  • 瀏覽器的CSS Hacks

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

    lieeps 評論0 收藏0

  • Making An Indicator With Pure CSS

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

    church 評論0 收藏0

  • webpack 4.x學習使用總結

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

    ls0609 評論0 收藏0

  • CSS hack合集

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

    wenshi11019 評論0 收藏0

發表評論

0條評論

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