CSS投影实现方式
备用素材：
1.png
shadow.png
第一种方式： 利用负边距实现
最终效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>利用背景实现阴影</title>
</head>
<body>
<div class="image_warpper">
<img src="1.jpg" width:200px; height:200px;/>
</div>
</body>
</html>
.image_warpper{
float:left;
background:url("shadow.png") no-repeat bottom right;
}
.image_warpper img{
background:#fff;
padding:4px;
margin: -4px 4px 4px -4px;
vertical-align: bottom;
border:1px solid #eee;
}
第二种方式，不是用负的外边距，而是使用position:relative属性
.image_warpper{
float:left;
background:url("shadow.png") no-repeat bottom right;
}
.image_warpper img{
background:#fff;
padding:4px;
position:relative;
vertical-align: bottom;
border:1px solid #ccc;
top:-4px;
left:-4px;
}
效果如下：
第三种方式： CSS3 - Box-shadow
顺带回顾下其语法：
.image_warpper{
float:left;
background:url("shadow.png") no-repeat bottom right;
}
.image_warpper img{
background-color:#fff;
padding:4px;
vertical-align: bottom;
border:1px solid #ccc;
box-shadow: 4px 4px #ccc;
}
目前支持该属性现代浏览器： IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
CSS投影实现方式的更多相关文章
- CSS 的定位方式和含义
CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...
- CSS的引入方式
再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...
- 编写css代码的方式
css(层叠样式表) 在一个网页中主要负责了页面的数据样式. 编写css代码的方式: 第一种: 在style标签中编写css代码. 只能用于本页面中,复用性不强 ...
- CSS引入的方式有哪些? link和@import的区别是?转载
CSS引入的方式有哪些? link和@import的区别是? HTML 中引入 CSS 的方式 有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS ...
- css的存在方式和选择器
css的存在方式 元素内联 页面嵌入 外部引入 元素内联 直接在html的标签中定义样式,类似于: <div style="属性1;属性2;属性3"><div&g ...
- css常见布局方式
CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...
- 学习总结：CSS(一)定义方式、选择器、选择器权重
一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...
- python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- CSS 五种方式实现 Footer 置底
CSS 五种方式实现 Footer 置底 页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...
随机推荐
- java编程小技巧
1.缩进与反缩进 缩进:tab 反缩进:shift+tab 2.整段注释和取消整段注释 整段注释:ctrl+shift+/ 取消整段注释:ctrl+shift+\
- 《Linux内核分析》 week6作业-Linux内核fork()系统调用的创建过程
一.进程控制块PCB-stack_struct 进程在操作系统中都有一个结构,用于表示这个进程.这就是进程控制块(PCB),在Linux中具体实现是task_struct数据结构,它主要记录了以下信息 ...
- centos 6.5 安装阿里云的一键安装包(nginx+php5.4+mysql5.1)
安装阿里云提供的Linux一键安装web环境全攻略,本想着会有最复杂 ,没想到阿里云工程师提供的包没有任何限制(开始以为只能在阿里去的主机上使用).开源的精神就是好(注:我是伸手党). 环境 vmw ...
- js 邮箱正则匹配
$(function(){ var valAttr = '746979855qq.com'; \-])+\.)+([a-zA-Z0-]{,})+$/; var tmpresult = mail_fil ...
- 修改浏览器的User-Agent来伪装你的浏览器和操作系统
近期很多文章都提到了User-Agent (UA) 字符串,但大部分网友都不知道这个东西有什么用处.其实简单的说User-Agent就是客户端浏览器等应用程序使用的一种特殊的网络协议,在每次浏览器(邮 ...
- Spring碎点知识
1.依赖注入:不仅可以为Bean注入普通的属性值,还可以注入其他Bean的作用.通过配置文件组织在一起,这里的Bean是Java对象 说明:关于依赖注入与控制反转的这两个名字,表达的都是同一个意思,只 ...
- HTTP缓存机制[译文]
本文翻译自: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching ,主要用于个人记录和共享,若有疏漏错误,请不吝指正,谢谢! 通过重用已 ...
- Altium Designer多图纸原理图设计方法探讨
1 图纸结构 包括层次式图纸的连接关系是纵向的,也就是某一层次的图纸只能和相邻的上级或下级有关系,另一种即扁平式图纸的连接关系是横向的,任何两张图纸之间都可以建立信号连接． 2 网络连接方式 Alti ...
- QT中异形窗口的绘制（winEvent处理WM_NCHITTEST消息）
这里讨论的只是Windows平台上的实现. 在QT中绘制异形窗口,只要设定 windowFlag 为 CustomizeWindowHint,再结合setMask()就可以做出各种奇形怪状的窗口.相对 ...
- Jquery 对象集合的迭代扩展forEach
if (jQuery && !jQuery.fn.forEach) { $(function () { (function ($) { $.fn.extend({ forEach: f ...