聊代碼（第九十集）css樣式（之六十） 請將鼠標放在圖片上，看看下面四種不同的顏色遮罩。
帶邊框線(xiàn)的顏色遮罩
帶邊框線(xiàn)有過(guò)渡效果的顏色遮罩
帶邊框線(xiàn)的漸變顏色遮罩
帶邊框線(xiàn)的旋轉顏色遮罩
代碼：
＜style type="text/css"＞.遮罩層{
text-align: center;
}
.遮{
display: inline-block; /*使塊級元素在同一行內而不換行*/
width: 150px; height: 350px; /*圖片寬高*/
margin:5px; /*外邊距*/
position: relative; /*相對定位*/
}
.遮:before{
width: 150px; height: 350px; /*遮罩寬高*/
background: #f0f; /*遮罩顏色*/
opacity: 0; /*透明度*/
content: '我愛(ài)老小孩'; /*顯示內容*/
position: absolute; top: -5px; left: -5px; /*遮罩絕對定位*/
}
#圖1:hover:before{
opacity: 0.6; /*透明度*/
border:5px solid #0ff; /*邊框線(xiàn)*/
}
#圖2:hover:before{
opacity: 0.6; /*透明度*/
border:5px solid #0f0; /*邊框線(xiàn)*/
transition: 2.5s linear; /*過(guò)渡效果*/
background:#0f0; /*過(guò)渡到的顏色*/
}
#圖3:hover:before{
opacity: 0.6; /*透明度*/
border:5px solid #f00; /*邊框線(xiàn)*/
background:-webkit-gradient(linear,0 0, 0 bottom, from(#0f0), to(rgba(255, 0, 0, 0.8))); /*漸變*/
}
#圖4:hover:before{
border:5px solid #ff0; /*邊框線(xiàn)*/
opacity: 0.6; /*透明度*/
transform:rotate(360deg); /*旋轉*/
transition:all 5s ; /*旋轉時(shí)間*/
}
.遮 img{width: 100%;height: 100%; margin:0px;}
＜/style＞
＜div class="遮罩層">
＜div class="遮" id="圖1"＞
＜img src="//image109.360doc.com/DownloadImg/2022/09/2012/252358742_1_2022092012031841.jpg" /＞＜span class="橙"＞帶邊框線(xiàn)的顏色遮罩＜/span＞＜/div＞
＜div class="遮" id="圖2"＞
＜img src="//image109.360doc.com/DownloadImg/2022/09/2012/252358742_2_20220920120318213.jpg" /＞＜span class="橙"＞帶邊框線(xiàn)有過(guò)渡效果的顏色遮罩＜/span＞＜/div＞
＜div class="遮" id="圖3"＞
＜img src="//image109.360doc.com/DownloadImg/2022/09/2012/252358742_3_20220920120318322.jpg" /＞＜span class="橙"＞帶邊框線(xiàn)的漸變顏色遮罩＜/span＞＜/div＞
＜div class="遮" id="圖4"＞
＜img src="//image109.360doc.com/DownloadImg/2022/09/2012/252358742_4_20220920120318432.jpg" /＞＜span class="橙"＞帶邊框線(xiàn)的旋轉顏色遮罩＜/span＞＜/div＞
＜/div＞
代碼解析：
代碼中已作注釋?zhuān)涣碣樖觥?div style="height:15px;">
