利用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。
利用box-shadow实现伪边框透明到图片的更多相关文章
- Qt Widget 利用 Qt4.5 实现酷炫透明窗体
本文讲述的是Qt Widget 利用 Qt4.5 实现酷炫透明窗体,QWidget类中的每一个窗口部件都是矩形,并且它们按Z轴顺序排列的.一个窗口部件可以被它的父窗口部件或者它前面的窗口部件盖住一部分 ...
- css边框样式、边框配色、边框阴影、边框圆角、图片边框
边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...
- asp.net动态输出透明gif图片
要使用asp.net动态输出透明gif图片,也就是用Response.ContentType = "image/GIF". 查了国内几个中文资料都没解决,最后是在一个英文博客上找到 ...
- 利用ArcMap对tiff或jpg格式地图图片的配准步骤
原文:利用ArcMap对tiff或jpg格式地图图片的配准步骤 在实际应用中,经常会遇到提供一张高精度的地图图片文件,如何对将该图片进行配准(使图片具有经纬度坐标). 当然我们得有一些大概的参考图层, ...
- Android-加载透明PNG图片变黑的问题
png和jpg作为两种最常用的图片格式,首先我们要知道他们的区别: 1.从一般图片的外观上来说,他们是无法直接判断的 2.从文件大小上来说,同样一张图png肯定比jpg的大 3.通过查资料咱们可以发现 ...
- NSIS:简单按钮美化插件SkinButton,支持透明PNG图片。
原文 NSIS:简单按钮美化插件SkinButton,支持透明PNG图片. 征得作者贾可的同意,特发布按钮美化插件SkinButton. 插件说明: 使用GDI+库写的一个简单按钮美化插件,支持透明P ...
- 利用纯CSS3实现超立体的3D图片侧翻倾斜效果
原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...
- [TFRecord格式数据]利用TFRecords存储与读取带标签的图片
利用TFRecords存储与读取带标签的图片 原创文章,转载请注明出处~ 觉得有用的话,欢迎一起讨论相互学习~Follow Me TFRecords其实是一种二进制文件,虽然它不如其他格式好理解,但是 ...
- DevExpress 中 设置 labelControl 的背景透明到图片的方法
labelControl 中的 backColor 可以设置为: TransParent 当设置为: Transparent 的时候,labelControl 的背景依然为 主form的背景颜色 ,研 ...
随机推荐
- [LeetCode] Product of Array Except Self 除本身之外的数组之积
Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...
- css的初始化样式
一切为了敏捷开发: http://blog.sina.com.cn/s/blog_71ed1b870101a52w.html CSS初始化示例代码 /* css reset www.admin1000 ...
- VS2010快捷键设置
1.进入工具----选项 对话框 2.选择 环境---->键盘 3. 在 [显示命令包含] 下面的对话框中输入"对齐"关键字,然后就会在这个编辑框下面一个文本窗口中显示关 ...
- 《UNIX环境高级编程》笔记——3.文件IO
一.引言 说明几个I/O函数:open.read.write.lseek和close,这些函数都是不带缓冲(不带缓冲,只调用内核的一个系统调用),这些函数不输入ISO C,是POSIX的一部分: 多进 ...
- Mysql 中文乱码(Navicat for MySQL)
在使用Navicat for MySQL查看插入数据库的数据时,发现中文显示为乱码.搞了好久,理清思路如下: 确定mysql本身编码设置为utf8(也可以为gbk gb2312等) 用Navicat ...
- JavaScript工具代码
html编码 function htmlEscape(sHtml){ return sHtml && sHtml.replace(/[<>&"]/g, f ...
- weiphp踩坑记录
记录使用weiphp过程中遇到的问题及解决办法: 1.按照网上的教程创建插件怎么没有效果?replyText没有回复信息? 后台清除缓存即可!
- Sublime Text 配置代码
{ "font_face": "Courier New bold", "font_size": 15.0, "ignored_wo ...
- github 相关英语
github 相关英语 repository n. 仓库 A repository contains all the files for your project, including the rev ...
- Python_猜大小
# 需要在python3上执行 import random def game (capital = 1000): point1 = random.randrange(1,7) point2 = ran ...