利用box-shadow实现伪边框透明到图片

前阵子突然看到了一个效果，一张图片，有一个边框，但是边框可以透明到图片。直接上图

贴代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.box{width:200px;height:200px;box-shadow:0 0 0 10px rgba(255,0,0,0.3) inset;}
.box img{width:100%;position:relative;z-index:-1;}
</style>
</head>

<body>
<div class="box">
    <img src="http://s13.sinaimg.cn/middle/68e10bbfga59a311f228c&690" />
</div>
</body>
</html>

普通的边框无法实现，虽然css3有一个border-image，但是无法做到跟上面的效果。

说一下为什么img需要添加position:relative;z-index:-1;

box-shadow的层级没有内容的层级高，也就是没有图片的层级高，虽然没有声明。

如果不声明图片的层级低于box-shadow，那么图片会盖住box-shadow。

posted @ 2016-11-08 20:22  Lieber-l  阅读(1146)  评论(0)  编辑  收藏  举报