邊框折角效果
阿新 • • 發佈：2017-09-08
height html utf-8 效果 absolute none isp opened pre 
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .image-layer { 8 width: 384px; 9 height: 240px; 10 margin: 40px auto 0; 11 position: relative;View Code12 cursor: pointer; 13 overflow: hidden; 14 } 15 16 .image-layer:before { 17 content: ‘‘; 18 position: absolute; 19 top: 0; 20 right: 0; 21 border: 0px solid; 22 border-color: rgba(0, 0, 0, 0.2) #fff;23 -webkit-transition: border .5s ease; 24 } 25 26 .image-layer:hover:before { 27 border-right-width: 80px; 28 border-bottom-width: 80px 29 } 30 </style> 31 </head> 32 <body> 33 34 35 <div class="image-layer" id="image-layer"> 36<img src="test.jpg" /> 37 </div> 38 39 </body> 40 </html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.image-layer {
width: 384px;
height: 240px;
margin: 40px auto 0;
position: relative;
cursor: pointer;
overflow: hidden;
}
.image-layer:before {
content: ‘‘;
position: absolute;
top: 0;
right: 0;
border: 0px solid;
border-color: rgba(0, 0, 0, 0.2) #fff;
-webkit-transition: border .5s ease;
}
.image-layer:hover:before {
border-right-width: 80px;
border-bottom-width: 80px
}
</style>
</head>
<body>
<div class="image-layer" id="image-layer">
<img src="test.jpg" />
</div>
</body>
</html>
邊框折角效果