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

贴代码

<!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 1080 线段树点修改

    先来介绍一下线段树. 线段树是一个把线段,或者说一个区间储存在二叉树中.如图所示的就是一棵线段树,它维护一个区间的和. 蓝色数字的是线段树的节点在数组中的位置,它表示的区间已经在图上标出,它的值就是这 ...

  2. oracle add_months函数

    oracle add_months函数 add_months 函数主要是对日期函数进行操作,举例子进行说明 add_months 有两个参数,第一个参数是日期,第二个参数是对日期进行加减的数字(以月为 ...

  3. vi安装Vundle+YouCompleteMe+注释快捷'scrooloose/nerdcommenter'

    Vundle is short for Vim bundle and is a Vim plugin manager. 从git上下载vundle $ git clone https://github ...

  4. .NET Core中ADO.NET SqlClient的使用与常见问题

    一.简介 在很多要求性能的项目中,我们都要使用传统的ADO.NET的方式来完成我们日常的工作:目前有一些网友问有关于.NET Core操作SQL Server的问题在本文中解答一下. 本文旨在指出,在 ...

  5. Ajax入门(一)

    最近开始学习Ajax了0.0,虽然其他的还没巩固,但既然学了就先写下来吧... Ajax的定义呢,百度吧= =...就觉得最实用的地方就是页面无刷新,但网页实现了与后台的同步更新.   1, 首先创建 ...

  6. 修改 jquery.validate.js 支持非form标签

    尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...

  7. ROS中DDNS的使用

    一.通过tool fetch更新ddns,关于此命令的使用,参考 tool fetch Scripts中添加脚本/tool fetch url="http://www.51kwl.com/? ...

  8. Redis 常用操作

    import org.junit.Before;import org.junit.Test;import redis.clients.jedis.Jedis;import java.util.Set; ...

  9. HTML之form表单和input系列

    <form method="POST" action="/host"> <input class="c1" type=&q ...

  10. openvpn 启动

    安装 yum -y install openvpn 配置文件可以放在: /etc/openvpn 例如,我这里的路径: [mslagee@centos-dev ~]$ cd /etc/openvpn/ ...