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

贴代码

<!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. ngx_http_proxy_module模块.md

    ngx_http_proxy_module ngx_http_proxy_module模块允许将请求传递到另一个服务器. proxy_bind Syntax: proxy_bind address [ ...

  2. 【IScroll深入学习】解决IScroll疑难杂症

    前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...

  3. Basic EEG waves 四种常见EEG波形

    Source: https://www.medicine.mcgill.ca/physio/vlab/biomed_signals/eeg_n.htm The electroencephalogram ...

  4. ITIL十大流程

    1.服务水平管理(Service Level Management):服务水平管理的目标是通过协调IT用户和提供者双方的观点,实现特定的.一致的.可测量的服务水平,以为客户节省成本.提高用户生产率. ...

  5. 四.Android adb命令（持续更新...）

    1.安装:甭管从哪里下载下来的apk,放在指定的目录下,不一定非要是sdk的目录下:adb install "d:\hxcjaz.apk"(指定的一个目录)2.卸载:adb uni ...

  6. Android基础总结（七）

    广播(掌握) 广播的概念 现实:电台通过发送广播发布消息,买个收音机,就能收听 Android:系统在产生某个事件时发送广播,应用程序使用广播接收者接收这个广播,就知道系统产生了什么事件. Andro ...

  7. 用pyspider爬淘宝MM照片

    #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on 2016-12-09 15:24:54 # Project: taobaomm ...

  8. C#工具代码

    反射获取当前请求参数 var prop = System.Type.GetType("System.Web.HttpContext, System.Web, Version=4.0.0.0, ...

  9. linux动态代码注入

    参考网上文章:http://www.freebuf.com/articles/system/6388.html 按照文章,实现了代码的动态注入,即对一个正在运行的进程,在不重启的情况下执行一段不在原程 ...

  10. prefix pct文件配置Xcode

    1.查看项目的各个文件夹下的文件名称: 2.配置如下图:需要添加$(SRCROOT)/项目的名称/pch所在文件夹路径 .易于理解方便那些初学者,下载别人的demO运行时遇到这样的类似的问题噢.< ...