<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style type="text/css">
div{
width:220px;
height:150px;
background:url(C:\\Users\\admin\\Desktop\\xlj.jpg) no-repeat;
margin:50px;
border-radius:15px;
position:relative;
}
div:hover:before{
content:"";
position:absolute;
top:0;
left:0;
border:10px solid red/*rgba(255,255,255,0.4)半透明边框*/;
width:100%;
height:100%;
box-sizing:border-box;/*css3内减模式,忽略border和padding的影响*/
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
</div>
</body>
</html>
css3 内减模式
最新推荐文章于 2022-09-27 19:30:06 发布