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

时间：2022-01-27 19:01:56

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

利用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。

相关文章