常用的css小技巧

目錄

• • 選取第一個元素，在css添加
  • 選取最後一個元素
  • 選取裡面第幾個的元素
  • 超出省略号
  • 字型引入
  • CSS3濾鏡
  • z-index失效場景

選取第一個元素，在css添加

li:first-child{
  background-color: blue;
}
           

選取最後一個元素

li:last-child{
  background-color: pink;
}
           

選取裡面第幾個的元素

li:nth-child(4){
  background-color: plum;
 }
           

超出省略号

width: 200px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/
-webkit-box-orient: vertical; /** 設定或檢索伸縮盒對象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 顯示的行數 **/
overflow: hidden;  /** 隐藏超出的内容 **/
           

字型引入

@font-face {
     font-family: 'ERASMD';
     src: url('ERASMD.TTF')
 }

 div {
     font-family: ERASMD
 }
           

CSS3濾鏡

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%) /*将圖像轉換為深褐色*/
           

z-index失效場景

1. iOS的彈性滑動屬性-webkit-overflow-scrolling: touch會導緻z-index屬性失效
2. transform動畫