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

資訊專欄INFORMATION COLUMN

關于在一段文本上加修飾劃線的效果

wthee / 3500人閱讀

摘要:最近遇到一個需求,要在一段文字上面加上一條背景色。類似于上學時候用的記號筆做筆記一樣的效果。第二種和第一種類似還是依靠漸變效果,不過是從左到右的實現。元素相對定位,偽類絕對定位,設置來實現覆蓋住文字的效果。

最近遇到一個需求,要在一段文字上面加上一條背景色。類似于上學時候用的記號筆做筆記一樣的效果。
第一映像想到的可能是text-decoration: line-through;不過這里有一個問題,先上圖:

放學啦啦
#s5{
  text-decoration: line-through;
}
#s5 span{
  font-size: 60px;
}

很明顯因為文字大小不一致,導致line-through的位置會錯位。

再看下圖的解決辦法,這里就沒有改變個別文字的大小了。小伙伴們自己可以動手試一試。

附上代碼:

雯子同學 丸子同學 早上好,老師 早上好, 同學們
div {
    font-size: 40px;
}
#s1 {
    background-image: linear-gradient(to bottom, #fff 45%, #0aa 45%, #0aa 60%, #fff 60%);
}
#s2 {
    background-image: linear-gradient(to right, blue, blue 100%);
    background-position: 0 50%;
    background-repeat: repeat-x;
    background-size: 100% 7px;
}
#s3 {
    border-bottom: 8px solid red;
    display: inline-block;
    height: 26px;
}
#s4 {
    position: relative;
}
#s4:after {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    display: block;
    width: 100%;
    border: 5px solid yellow;
}

第一種借助了linear-gradient實現從上到下的漸變效果,通過屬性巧妙的達到銳變的效果。

第二種和第一種類似還是依靠漸變效果,不過是從左到右的實現。比起第一種可調性更大。花樣更多一點。

第三種也是一種很不錯,用的比較多的方法。就不過多解釋了。

看到這里各位小伙伴們,有沒有發現一個問題。哪天設計過來說,你這線怎么在文字后面,不是說讓你劃掉那段文字嗎???這下尷尬了。
在這里我要介紹第四種了哈哈哈

通過:after或者:before。元素相對定位,偽類絕對定位,設置border來實現覆蓋住文字的效果。

好啦,到這里就算是講完了。寫的有點爛,CSS一直是我的弱項。希望可以幫到有需要的小伙伴們~

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

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

相關文章

  • 關于一段文本上加修飾劃線效果

    摘要:最近遇到一個需求,要在一段文字上面加上一條背景色。類似于上學時候用的記號筆做筆記一樣的效果。第二種和第一種類似還是依靠漸變效果,不過是從左到右的實現。元素相對定位,偽類絕對定位,設置來實現覆蓋住文字的效果。 最近遇到一個需求,要在一段文字上面加上一條背景色。類似于上學時候用的記號筆做筆記一樣的效果。第一映像想到的可能是text-decoration: line-through;不過這里...

    mzlogin 評論0 收藏0
  • HTML基礎總結

    摘要:細化知識點總結標簽都是標題標簽,定義一段話的標題,最大,依次遞減,最小標題標簽的作用讓文本加粗顯示段落標簽標簽用來顯示一段文本圖片,它會忽略源代碼中的排版塊元素獨占一行的元素,和相鄰的元素不能共享同一行所有的塊元素都有屬性和元素都是HTML細化知識點總結 1.h1-h6標簽 都是標題標簽,定義一段話的標題,h1最大,依次遞減,h6最小 標題標簽的作用:讓文本加粗顯示 ? 2. 段落標簽:p...

    Jacendfeng 評論0 收藏0
  • Web前端開發規范手冊

    摘要:規范目的為提高團隊協作效率便于后臺人員添加功能及前端后期優化維護輸出高質量的文檔特制訂此文檔。 規范目的 為提高團隊協作效率, 便于后臺人員添加功能及前端后期優化維護, 輸出高質量的文檔, 特制訂此文檔。 文件規范 文件命名規則 文件名稱統一用小寫的英文字母、數字和下劃線的組合,其中不得包含漢字、空格和特殊字符;命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...

    wua_wua2012 評論0 收藏0
  • Web前端開發規范手冊

    摘要:規范目的為提高團隊協作效率便于后臺人員添加功能及前端后期優化維護輸出高質量的文檔特制訂此文檔。 規范目的 為提高團隊協作效率, 便于后臺人員添加功能及前端后期優化維護, 輸出高質量的文檔, 特制訂此文檔。 文件規范 文件命名規則 文件名稱統一用小寫的英文字母、數字和下劃線的組合,其中不得包含漢字、空格和特殊字符;命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...

    Tamic 評論0 收藏0

發表評論

0條評論

wthee

|高級講師

TA的文章

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