码迷,mamicode.com
首页 > Web开发 > 详细

CSS实现鼠标移入图片边框有小三角

时间:2017-06-15 21:49:27      阅读:159      评论:0      收藏:0      [点我收藏+]

标签: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实现鼠标移入图片边框有小三角

标签:htm   doc   文档   round   jpg   12px   img   play   body   

原文地址:http://www.cnblogs.com/eddina/p/7019937.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!