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

贴代码

<!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。

利用box-shadow实现伪边框透明到图片的更多相关文章

  1. Qt Widget 利用 Qt4.5 实现酷炫透明窗体

    本文讲述的是Qt Widget 利用 Qt4.5 实现酷炫透明窗体,QWidget类中的每一个窗口部件都是矩形,并且它们按Z轴顺序排列的.一个窗口部件可以被它的父窗口部件或者它前面的窗口部件盖住一部分 ...

  2. css边框样式、边框配色、边框阴影、边框圆角、图片边框

     边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...

  3. asp.net动态输出透明gif图片

    要使用asp.net动态输出透明gif图片,也就是用Response.ContentType = "image/GIF". 查了国内几个中文资料都没解决,最后是在一个英文博客上找到 ...

  4. 利用ArcMap对tiff或jpg格式地图图片的配准步骤

    原文:利用ArcMap对tiff或jpg格式地图图片的配准步骤 在实际应用中,经常会遇到提供一张高精度的地图图片文件,如何对将该图片进行配准(使图片具有经纬度坐标). 当然我们得有一些大概的参考图层, ...

  5. Android-加载透明PNG图片变黑的问题

    png和jpg作为两种最常用的图片格式,首先我们要知道他们的区别: 1.从一般图片的外观上来说,他们是无法直接判断的 2.从文件大小上来说,同样一张图png肯定比jpg的大 3.通过查资料咱们可以发现 ...

  6. NSIS：简单按钮美化插件SkinButton，支持透明PNG图片。

    原文 NSIS:简单按钮美化插件SkinButton,支持透明PNG图片. 征得作者贾可的同意,特发布按钮美化插件SkinButton. 插件说明: 使用GDI+库写的一个简单按钮美化插件,支持透明P ...

  7. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  8. [TFRecord格式数据]利用TFRecords存储与读取带标签的图片

    利用TFRecords存储与读取带标签的图片 原创文章,转载请注明出处~ 觉得有用的话,欢迎一起讨论相互学习~Follow Me TFRecords其实是一种二进制文件,虽然它不如其他格式好理解,但是 ...

  9. DevExpress 中 设置 labelControl 的背景透明到图片的方法

    labelControl 中的 backColor 可以设置为: TransParent 当设置为: Transparent 的时候,labelControl 的背景依然为 主form的背景颜色 ,研 ...

随机推荐

  1. codevs 3288 积木大赛

    题目描述 Description 春春幼儿园举办了一年一度的"积木大赛".今年比赛的内容是搭建一座宽度为 n 的大厦,大厦可以看成由 n 块宽度为1的积木组成,第i块积木的最终高度 ...

  2. [LeetCode] Binary Tree Longest Consecutive Sequence 二叉树最长连续序列

    Given a binary tree, find the length of the longest consecutive sequence path. The path refers to an ...

  3. [LeetCode] Count Complete Tree Nodes 求完全二叉树的节点个数

    Given a complete binary tree, count the number of nodes. Definition of a complete binary tree from W ...

  4. 第五次团队作业——第一次项目冲刺——Alpha版本

    Deadline:2016-11-19    8:00am 本次团队作业将持续三周时间,完成项目Alpha版本,在2016.11.19 的实践课上进行演示操作. 阅读或再次阅读<构建之法> ...

  5. Freemarker中空值 null的处理++++定义数组

    http://blog.java-zone.org/archives/800.html <#list listBlogPost as blogPost> </#list> 如果 ...

  6. NBUT 1457 莫队算法 离散化

    Sona Time Limit:5000MS     Memory Limit:65535KB     64bit IO Format: Submit Status Practice NBUT 145 ...

  7. C#执行Dos命令公用方法

    private static string InvokeCmd(string cmdArgs) { string Tstr = ""; Process p = new Proces ...

  8. 本地显示svg正常显示，在工程项目中无法正常显示

    提前说明:此文仅记录个人项目问题,不具有众参考意义. 原因: 工程中对引用的资源进行解析设置,即resource设置. 解决方法: 找到静态资源加载路径,添加 if(urlpostfix.equals ...

  9. 精通Web Analytics 2.0 （11） 第九章： 新兴分析—社交，移动和视频

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第九章: 新兴分析-社交,移动和视频 网络在过去几年中发生了不可思议的发展变化:从单向对话到双向对话的转变; 由视频,Ajax和 ...

  10. Shiro-集成Spring

    集成Spring 加入Spring 和Shiro的jar 包 配置Spring 及SpringMVC 参照:1.3.2\shiro-root-1.3.2-source-release\shiro-ro ...