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

贴代码

<!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. python 小程序 复制目录树

    1. 将一个目录树完全复制到另外一个目录下面 import os, sys """ 复制目录树 """ maxloadsize = 1024 ...

  2. [LeetCode] Repeated Substring Pattern 重复子字符串模式

    Given a non-empty string check if it can be constructed by taking a substring of it and appending mu ...

  3. [LeetCode] Insert Interval 插入区间

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  4. ping环回地址和ping主机地址的区别

    ping127.0.0.1和ping本机的过程是不一样的ip输出函数先检查地址是不是环回地址1.如果是环回地址 直接交给环回驱动程序处理 返回ip输入函数2.如果不是环回地址 检查是不是广播或者多播地 ...

  5. Ubuntu 16.04 LAMP server 指南 - 配置 Apache2.4,PHP7,和MariaDB（而不是MySQL）

    翻译自:https://www.howtoforge.com/tutorial/install-apache-with-php-and-mysql-on-ubuntu-16-04-lamp/ 昨天在虚 ...

  6. VS2010快捷键设置

    1.进入工具----选项  对话框 2.选择  环境---->键盘 3. 在 [显示命令包含] 下面的对话框中输入"对齐"关键字,然后就会在这个编辑框下面一个文本窗口中显示关 ...

  7. Html-IOS下input的样式添加不上的解决方案

    问题描述: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&qu ...

  8. @RenderSection,@RenderPage,@RenderBody介绍

    在MVC的模板页中会用到上面三个东西,那么今天就简单归纳下各有什么作用 1.@RenderSection 用法 对CSS或JS部分模块的预留定义 例如模板页定义了@RenderSection(&quo ...

  9. Hihocoder 太阁最新面经算法竞赛18

    Hihocoder 太阁最新面经算法竞赛18 source: https://hihocoder.com/contest/hihointerview27/problems 题目1 : Big Plus ...

  10. Python学习--Python 环境搭建

    Python环境搭建 Python是跨平台的编程语言,可应用于Windows.Linux.Mac OS X.你可以通过终端窗口输入"python"命令来查看本地是否安装了Pytho ...