1、resize:規(guī)定是否可以拖動盒子 要和overflow搭配使用(值隨意)
屬性值:
none; 不可拖動(一般元素的默認(rèn)值)textarea默認(rèn)值both(以下所有屬性都適用于textarea)
both 水平和垂直都可以拖動
horizontal 水平可以拖動
vertical 垂直可以拖動
2、user-select:定義文本是否可以被選中
屬性值:
text 默認(rèn)值,文本可被選中
none 文本不可被選中
all 成標(biāo)簽域選中(點擊這個標(biāo)簽就可以選中標(biāo)簽內(nèi)所有的文本)
3、columns:規(guī)定列的寬度和列數(shù)(columns: 100px 4; //最小100px四列)
column-gap: 列之間的間隔
column-rule 在列與列之間出現(xiàn)邊框線
image.png
4、怪異盒子模型 box-sizing: border-box
實際的寬度 = 原來的寬度-padding-border(這里指的寬度是內(nèi)容寬度)。
神奇的是,我們給了盒子border和padding以后不會使我們的盒子變大,好像內(nèi)容被壓縮了,減小了內(nèi)容的寬度,這就解決了我們以前加padding使我們盒子變大的弊端。
前者未給 box-sizing: border-box,后者給了怪異盒子模型縮小了內(nèi)容區(qū)域總體大小沒變
image.png
5、倒影:-webkit-box-reflect: direction offset mask-box-image
屬性值:
direction(指定倒影的方向):
1、 above 指定倒影在對象上邊
2、 below 指定倒影在對象下邊
3、left 指定倒影在對象左邊
4、right 指定倒影在對象右邊
offset(對象與倒影的間隔):單位px 百分比 甚至還可以將距離拉到負(fù)值
mask-box-image(遮罩):可以為線性漸變 徑向漸變 圖片(必須為png背景透明)
-webkit-box-reflect: below 0 -webkit-linear-gradient(top,transparent,#fff);//完整實例