以下是從張鑫旭的博客中摘過來的

1.修改圖標顏色的方法 (原文：https://www.zhangxinxu.com/wordpress/2018/11/css-change-icon-color/)

　　css：

.colorful {display: inline-block;width: 32px; height: 32px;background-color: #f4615c;-webkit-mask: url('http://static.fdc.com.cn/homem/images/tpl/location.svg') no-repeat;mask: url('http://static.fdc.com.cn/homem/images/tpl/location.svg') no-repeat;-webkit-mask-size: 100% 100%;mask-size: 100% 100%; }

html：<span class="colorful" ></span>

使圖標變成黑色或白色的css代碼為：黑filter: brightness(0);? ?白 filter: brightness(1);

2.關(guān)于頁面平滑滾動的?https://www.zhangxinxu.com/wordpress/2018/10/scroll-behavior-scrollintoview-%E5%B9%B3%E6%BB%91%E6%BB%9A%E5%8A%A8/

　　2.1 tab內(nèi)平滑滾動

　　scss：

.img-wraper{width:100%;margin:0 auto;height:200px;scroll-behavior: smooth;overflow: hidden; } .img-item{width:100%;height:100%;position: relative;overflow: hidden;input{position: absolute; top:0; height: 100%; width: 1px;}img{width:100%;height:100%;} }

html：

　<div class="label-wraper"><label class="label" for="jp1">選項卡1</label><label class="label" for="jp2">選項卡2</label><label class="label" for="jp3">選項卡3</label></div><ul class="img-wraper"><li class="img-item" ><input id="jp1"><img src="./images/bg1.jpg"></li><li class="img-item" ><input id="jp2"><img src="./images/bg2.jpg"></li><li class="img-item" ><input id="jp3"><img src="./images/bg3.jpg"></li></ul>

?獲取段落里的第一個字符可使用::first-letter

3、用右至左，從上至下的文本排列方式，css代碼如下

.verticle-mode {writing-mode: tb-rl;-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;*writing-mode: tb-rl; }

?4、 https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/

　　postion:sticky?可以看作是position:relative和position:fixed的結(jié)合體——當元素在屏幕內(nèi)，表現(xiàn)為relative，就要滾出顯示器屏幕的時候，表現(xiàn)為fixed

　　兩個關(guān)鍵點：

定位用的bottom，效果和top正好是對立的。設置top粘滯的元素隨著往下滾動，是先滾動后固定；而設置bottom粘滯的元素則是先固定，后滾動；（設置bottom時，bottom的值是相對于瀏覽器窗口的。若值較小，在本該文檔流豎排下來的下方時此值失效，按照文檔流來。）

z-index:-1讓網(wǎng)友評論footer元素藏在了content的后面，于是才有了“猶抱琵琶半遮面”的效果。

5、不定高的標簽展示與隱藏添加動畫

.parent{&.open{.chapter_list_box{transform:scaleY(1);height: auto;transition: all 0.5s ease;}} } .chapter_list_box{transform:scaleY(0);height: 0;overflow: hidden;transition: all 0.5s ease;}

?若只想利用高度來做動畫，height值不能為auto，需要是一個固定的值才能生效。

6、scroll-snap場景——? ?滑動依次顯示人物角色

ul {width: 375px; height: 667px;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;white-space: nowrap;overflow-y: hidden; } li {display: inline-block;width: 100%; height: 100%;scroll-snap-align: center; }

?

轉(zhuǎn)載于:https://www.cnblogs.com/nanacln/p/10143540.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的我不知道的css的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。