CSS 实现边框浮动效果.半角与_Hover

1:2.效果:

页面代码:jsp

<div class="luis"  >
<!-- 
<c:forEach items="${hotelList}" var="l">

<a>${l}</a> 


</c:forEach> -->
<h1>luis</h1>
</div>

css:代码

.luis{

border: 1px solid #0344EC;
width:200px;
/* 半径   webkit浏览器  */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 5px 0;
padding: 10px 0 10px 0;

/*  减慢速度    transition-duration:0.3s;   */
transition-property:margin-left, padding-left, margin-right, padding-right;
transition-duration:0.3s;
transition-delay:0s;
/* Safari */
-webkit-transition-property:margin-left, padding-left, margin-right, padding-right;
-webkit-transition-duration:0.3s;
-webkit-transition-delay:0s;
}
.luis:hover{
/* 加阴影  */
-moz-box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);
box-shadow: 0 0 6px 2px rgba(0,0,0,0.1);

margin-left: -17px;
padding-left: 17px;
margin-right: -27px;
padding-right: 27px;
}