常用的css小技巧

2021-10-02 02:33:36 字數 1195 閱讀 2648

li:first-child

li:last-child

li:nth-child(4)

width

: 200px;

word-break

: break-all;

text-overflow

: ellipsis;

display

: -webkit-box;

/** 物件作為伸縮盒子模型顯示 **/

-webkit-box-orient

: vertical;

/** 設定或檢索伸縮盒物件的子元素的排列方式 **/

-webkit-line-clamp

: 3;

/** 顯示的行數 **/

overflow

: hidden;

/** 隱藏超出的內容 **/

@font-face

div

filter

:/*屬性*/

none

blur

(10px)

/*高斯模糊*/

brightness

(150%)

/*變亮*/

contrast

(150%)

/*調整影象的對比度*/

drop-shadow

(8px 8px 10px red)

/*設定陰影效果*/

grayscale

(50%)

/*灰度影象*/

hue-rotate

(90deg)

/*色相旋轉*/

invert

(100%)

/*反轉輸入影象*/

opacity

(30%)

/*轉化影象的透明程度*/

saturate

(800%)

)/*轉換影象飽和度*/

sepia

(100%)

/*將影象轉換為深褐色*/

ios的彈性滑動屬性-webkit-overflow-scrolling: touch會導致z-index屬性失效

transform動畫

CSS表常用小技巧

ul 標籤在 mozilla 中預設是有 padding 值的,而在 ie 中只有 margin 有值。同乙個的 class 選擇符可以在乙個文件中重複出現,而 id 選擇符卻只能出現一次 對乙個標籤同時使用 class和 id 進行 css 定義,如果定義有重複,id 選擇符做的定義有效。初學可能...

常用易忘CSS小技巧

wrap 單行文字 wrap 多行文字 wrap 不換行 wrap 自動換行 wrap 強制換行 wrap.wrap 單列展示時 wrap 多列展示時 wrap.wrap.wrap.wrap.wrapimgp 將所有字母變成大寫字母 p 將所有字母變成小寫字母 p 首字母大寫 p 將字型變成小型的大...

HTML中CSS常用小技巧

1 簡述塊級元素在父元素的居中方法有哪些?父元素position 父元素相對定位,子元素絕對定位,子元素margin auto top 0 left 0 bottom 0 right 0 父元素相對定位,子元素絕對定位,子元素left 50 top 50 margin left 子元素一半的寬度 m...