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部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...
随机推荐
- bat（传参情况下）取得当前bat所在的目录路径
在传参情况下,取得bat文件所在的目录路径,可以使用: %~dp0 说明: 01.所谓传参情况是指,将某个文件拖放到bat文件上并放开.此种情况下执行的bat命令就是有带参数的. 02.上面末尾的0是 ...
- php发送post请求的三种方法示例
本文分享下php发送post请求的三种方法与示例代码,分别使用curl.file_get_content.fsocket来实现post提交数据,大家做个参考. php发送post请求的三种方法,分别使 ...
- powerpoint无法输入中文怎么办|ppt文本框无法输入中文解决办法
powerpoint文本框无法输入中文的情况不知大家是否遇到过呢?反正小编是遇到过这样的情况的,简直是急煞人也!那么powerpoint无法输入中文时应该怎么办呢?本节内容中小编就为大家带来ppt文本 ...
- 开发H5小游戏
Egret白鹭H5小游戏开发入门(一) 前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...
- c#使用spy进行模拟操作
很无奈,写了很长时间,最后保存时网页失去响应,真是要命呢.本来想就此放弃了,但是想还是粗略的重写一次吧,希望日后可以对朋友有一定的帮助. Microsoft.Spy工具是一个基础工具,我们简要介绍一下 ...
- LINUX下为LVM磁盘增加硬盘空间
总结: ~~~~~~~~~~~~~~~~~~~~ fdisk -lpvcreate /dev/sdbvgextend VolGroup /dev/sdblvextend -L +180G /dev/m ...
- Java 反射机制详解
动态语言 动态语言,是指程序在运行时可以改变其结构:新的函数可以被引进,已有的函数可以被删除等在结构上的变化.比如众所周知的ECMAScript(JavaScript)便是一个动态语言.除此之外如Ru ...
- 动态sql语句
当需要根据外部输入的参数来决定要执行的SQL语句时,常常需要动态来构造SQL查询语句,个人觉得用得比较多的地方就是执行搜索查询的SQL语句.对于搜索,可能要根据搜索条件判断来动态执行SQL语句. 在S ...
- hdu4111 Alice and Bob
Alice and Bob Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- 日积月累：EditText软键盘的显示和隐藏
在工作过程中,常常会遇见需要根据自己的需求,控制文本框的键盘显示和隐藏. 通过查阅Android文档,介绍可以通过在清单文件中<activity>元素中添加android:windowSo ...