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部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推 ...
随机推荐
- JNDI--Java命名和目录接口
JNDI主要用于在容器中配置某些资源,让所有项目可以使用.JNDI可以提供: 1:数据库连接池. 自定义连接池 第三方连接池 Dbcp ...
- 使用shiro标签遇到的部分问题的解决思路
最近几天,在shiro进行系统权限控制.在处理JSP页面的时候,遇到几个问题,纠结好几天,终于成功解决这些问题. 1.使用<shiro:principal>的时候,如何得到整个类的信息? ...
- MySQL单列索引和组合索引的区别介绍
MySQL单列索引和组合索引的区别介绍 作者:佚名出处:IT专家网2010-11-22 13:05 MySQL单列索引是我们使用MySQL数据库中经常会见到的,MySQL单列索引和组合索引的区别可能有 ...
- maven 整理
1. 打包命令: mvn package -DskipTests 2. 发布命令: mvn deploy -DperformRelease=true
- Gradle一分钟实现Spring-MVC
前提: 1,已安装JDK 2, 有Intellij IDEA 3, 已安装Gradle 一分钟实现步骤: 1,mkdir Spring-MVC;cd Spring-MVC2,gradle init3, ...
- angular2 环境配置
看到angular发布正式版,心动不已准备测试下. 看着官网教程,使用了cli创建项目,在命令行中键入: 安装cli npm install -g angular-cli 如果安装过以前的版本,请执行 ...
- 转载：解决linux ping: unknown host www.baidu.com
解决linux ping: unknown host www.baidu.com 转载网址:http://www.kankanews.com/ICkengine/archives/48417.shtm ...
- delphi if 语句循环语句
if语句------------------------------------------------------------------------------------------------ ...
- C程序设计语言练习题1-17
练习1-17 编写一个程序,打印长度大于80个字符的所有输入行. 代码如下: #include <stdio.h> // 包含标准库的信息. #define MAXROW 10 // 最大 ...
- 基于.NET MVC的高性能IOC插件化架构(二)之插件加载原理
上一篇博文简单介绍了下插件化的代码组成部分:http://www.cnblogs.com/gengzhe/p/4390932.html,源码地址:https://github.com/luohuazh ...