H5C3--边框阴影box-shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
} img {
width: 100%;
display: block;
} .items {
padding: 30px;
overflow: hidden;
} .item {
width: 200px;
height: 200px;
padding-bottom: 100px;
margin-right: 30px;
border: 1px solid #CCC;
background-color: #FFF;
float: left;
}
/*添加阴影:
spread:设置阴影的扩散
inset:设置阴影为内阴影
box-shadow:offsetX offsetY blur spread color inset*/ /*需求:获取前四个item元素*/
.item:nth-of-type(-n + 4){
box-shadow: 3px 3px 3px 0px #ccc;
}
.item:nth-last-of-type(1){
box-shadow: 3px 3px 3px 0px #ccc inset,-3px -3px 3px 0px #ccc inset;
}
</style>
</head>
<body>
<div class="items">
<div class="item">
<img src="../images/pk1.png">
</div>
<div class="item">
<img src="../images/pk2.png">
</div>
<div class="item">
<img src="../images/pk3.png">
</div>
<div class="item">
<img src="../images/pk1.png">
</div>
<div class="item"></div>
</div> </body>
</html>
H5C3--边框阴影box-shadow的更多相关文章
- OpenGL阴影,Shadow Mapping(附源程序)
实验平台:Win7,VS2010 先上结果截图(文章最后下载程序,解压后直接运行BIN文件夹下的EXE程序): 本文描述图形学的两个最常用的阴影技术之一,Shadow Mapping方法(另一种是Sh ...
- css边框阴影
<style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;backg ...
- CSS 边框 阴影 效果
CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...
- div边框阴影的实现【转载】
box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: Firefox支持Box Shadow(阴影):-moz-box-shadow:2px 2p ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- “妄”眼欲穿-CSS之flex布局和边框阴影
妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...
- Html/CSS前端如何实现文字边框阴影
上次我们聊了<Html5前端如何实现文字阴影>,其实在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影. 一.边框阴影box-shadow 边框 ...
- HTML CSS边框阴影的实现
一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器. <!DO ...
- 边框阴影box-shadow
边框的阴影: 参数说明: box-shadow:1px 2px 3px 4px #ccc inset: 1px 从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度) 2px 从原点开始, ...
- flex布局和边框阴影
"妄"眼欲穿-CSS之flex布局和边框阴影 妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. flex布局 main axis:主轴:cross axis:交叉轴 ...
随机推荐
- 【daydayup】weTalk
先看一下项目效果 这个是我运行的作者的项目的wetalk-server项目,他还有wetalk-client 项目 先放下作者的github项目地址:https://github.com/mangyu ...
- DOM节点克隆
var newDiv = red.cloneNode();document.body.appendChild(newDiv);注意:1.默认只克隆元素本身:设置参数为true,进行深度克隆,可以克隆元 ...
- Java虚拟机性能管理神器 - VisualVM(6) 排查JAVA应用程序内存泄漏【转】
Java虚拟机性能管理神器 - VisualVM(6) 排查JAVA应用程序内存泄漏[转] 标签: javajvm内存泄漏监控工具 2015-03-11 18:30 1870人阅读 评论(0) 收藏 ...
- js获取网页屏高 屏宽
<SCRIPT LANGUAGE="JavaScript"> <!-- //document.body.scrollTop 滚动条的上端距离 //document ...
- PAT甲级——A1076 Forwards on Weibo
Weibo is known as the Chinese version of Twitter. One user on Weibo may have many followers, and may ...
- Python学习day06-Python基础(4)流程控制之while和for循环
Python学习day06-流程控制之while和for循环 Python学习day06-流程控制之while和for循环while循环1. 语法2. while+break,while+contin ...
- 第一周课堂笔记3th
1.bool值 True正确 False错误 数字为0时的显示 为空值时“” 2. str int bool布尔值 之间的转化 str int ...
- request与session的区别
request对象和session对象的最大区别是生命周期与范围. request request范围较小一些,只是一个请求. request对象的生命周期是针对一个客户端(说确切点就是一个浏览器应用 ...
- tomcat结构图
- Spring Boot 集成Jsp与生产环境部署
一.简介 提起Java不得不说的一个开发场景就是Web开发,也是Java最热门的开发场景之一,说到Web开发绕不开的一个技术就是JSP,因为目前市面上仍有很多的公司在使用JSP,所以本文就来介绍一下S ...