1. 程式人生 > >常用css樣式(文字超出部分用省略號顯示、滑鼠經過圖片放大、出現陰影)

常用css樣式(文字超出部分用省略號顯示、滑鼠經過圖片放大、出現陰影)

文字超出部分用省略號顯示:

white-space: nowrap; /* 不換行 */
overflow: hidden; /* 超出部分不顯示 */
text-overflow: ellipsis; /* 超出部分顯示為... */

滑鼠經過圖片放大

.team-img img{
width:188px;
height: 200px;
border-radius: 50%;
transition: all 1.2s;
-moz-transition: all 1.2s;
-webkit-transition: all 1.2s;
-o-transition: all 1.2s;
}
.team-img img:hover{
transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}

滑鼠經過,div出現陰影

.team-item{
background: #fff;
border-radius: 7px;
transition: all .3s linear;
}
.team-item:hover{ 
transition: .3s all;
box-shadow: 0px 6px 17px #888888;
}