標籤：htm doc 文檔 round jpg 12px img play body
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 body { 8 background:#999; 9 }10 a { 11 display: block; 12 position: relative; 13 width:64px;14 height:64px;15 margin: 100px auto;16 }17 a:hover em { 18 display:block; 19 position:absolute; 20 left:26px; /*(a的寬度-em的寬度)/2*/21 top:-12px; /*em自身邊框寬度的二倍*/22 border-width:6px; 23 border-style:solid; 24 border-color: transparent transparent #fff;/*transparent 用來指定全透明色彩*/ 25 }26 a:hover img {27 width:58px;28 height:58px; 29 border:3px solid #fff; 30 opacity:1; filter:alpha(opacity:100); 31 }32 a img { 33 width:60px;34 height:60px; 35 border: 2px solid #dfe8e4; 36 background:#040303; 37 opacity:0.7; 38 filter:alpha(opacity:70); 39 }40 </style>41 </head>42 43 <body>44 <a><em></em><img src="img/2.jpg" /></a>45 </body>46 </html>
CSS實現滑鼠移入圖片邊框有小三角
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
