<!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的更多相关文章

  1. OpenGL阴影，Shadow Mapping（附源程序）

    实验平台:Win7,VS2010 先上结果截图(文章最后下载程序,解压后直接运行BIN文件夹下的EXE程序): 本文描述图形学的两个最常用的阴影技术之一,Shadow Mapping方法(另一种是Sh ...

  2. css边框阴影

    <style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;backg ...

  3. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  4. div边框阴影的实现【转载】

    box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: Firefox支持Box Shadow(阴影):-moz-box-shadow:2px 2p ...

  5. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  6. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  7. Html/CSS前端如何实现文字边框阴影

    上次我们聊了<Html5前端如何实现文字阴影>,其实在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影. 一.边框阴影box-shadow 边框 ...

  8. HTML CSS边框阴影的实现

    一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器. <!DO ...

  9. 边框阴影box-shadow

    边框的阴影: 参数说明: box-shadow:1px 2px 3px 4px #ccc inset: 1px 从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度) 2px 从原点开始, ...

  10. flex布局和边框阴影

    "妄"眼欲穿-CSS之flex布局和边框阴影 妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. flex布局 main axis:主轴:cross axis:交叉轴 ...

随机推荐

  1. hudson通过ant自动编译、启动、停止java的jar

    set ANT_PATH=E:\soft\apache_ant\bine:cd E:\data\codex\server\trunk\serversvn up @echo.@echo.@echo &q ...

  2. Python全栈开发：冒泡排序

    #!/usr/bin/env python # -*- coding;utf-8 -*- """ 第一次对比:找到最大值,放到最后 对比是两两对比,对比的两个数组合共有l ...

  3. Python-匿名函数与异常处理

    目录 匿名函数 什么叫匿名函数? 语法 max/min() sorted() map() filter() reduce函数 内置函数 面向过程编程 异常处理 什么是异常 异常的种类 异常处理 try ...

  4. 安卓手机端微信网页浏览记录清理debugx5.qq.com

    最近我们环境从复)星(云切换到阿里云.早上地铁路上就有小伙伴@,一阵搜索.找的如下的方法. 记录一下: 目前只支持安卓手机的微信内置浏览器清理. 由腾讯提供的网址http://debugx5.qq.c ...

  5. Joomla - 菜单系统 （从创建到前端页面显示的过程）

    在 Joomla 中,菜单是最常用且重要的功能之一,一般用于承载页面内容和各内容间的切换.导航等,演绎着非常重要的角色: 一.新建菜单 进入后台,点击顶栏菜单 -> 菜单管理 -> 点击新 ...

  6. Sequelize 中文API文档－1. 快速入门、Sequelize类

    1. https://itbilu.com/nodejs/npm/VkYIaRPz-.html#api-init 2. http://docs.sequelizejs.com/manual/tutor ...

  7. 安装Tengine和Tengine说明

    什么是Tengine 官方帮助文档:http://tengine.taobao.org/nginx_docs/cn/   Tengine的安装   新建tengine用户组 groupadd -r n ...

  8. Python学习day01 - 计算机基础

    第一天 什么是编程 语言就是用来交流的. 语言+火构成了人类的文明 Python语言用来和计算机交流 通过他和计算机交流,然后完成很多程序员想要完成的事情,就叫编程. 为什么要编程 节省劳动力,更高效 ...

  9. net.sf.json JSONObject与JSONArray使用实例

    实例自己想的一个实例应用场景:一个人可以有多个角色,例如:在家中是儿子,在学校是学生,在公司是程序员,一个人还可以办好多业务 * 每个业务好多个人都可以办,则标记(mark)就是记录这唯一标识的(如i ...

  10. 2018-8-10-WPF-鼠标移动到列表上-显示列表图标

    title author date CreateTime categories WPF 鼠标移动到列表上 显示列表图标 lindexi 2018-08-10 19:16:51 +0800 2018-2 ...