1.  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
    <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
    <head>
  4.  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  
    <title>无标题文档</title>
  6.  
    <style>
  7.  
    .shadow{
  8.  
    float:left;
  9.  
    margin-left:20px;
  10.  
    background: #EEFF99;
  11.  
    width:200px;
  12.  
    height:400px;
  13.  
    }
  14.  
    .shadow:hover{
  15.  
     
  16.  
    -webkit-box-shadow: #ccc 0px 10px 10px;
  17.  
    -moz-box-shadow: #ccc 0px 10px 10px;
  18.  
    box-shadow: #ccc 0px 10px 10px; }
  19.  
    </style>
  20.  
    </head>
  21.  
     
  22.  
    <body>
  23.  
    <div class="shadow"></div>
  24.  
    <div class="shadow"></div>
  25.  
    <div class="shadow"></div>
  26.  
    </body>
  27.  
    </html>

html div四边阴影效果的更多相关文章

  1. （转）教你实现Winform窗体的四边阴影效果

    1.首先我们得有这样一张阴影图片. 2.然后分别有两个窗体去实现这个阴影效果. SkinForm - 用于实现阴影的绘制,特性:鼠标可穿透,无法点击,跟随窗体. SkinMain - 主窗体,也是承载 ...

  2. css给div添加阴影效果

    直接上代码: <style type="text/css">.mydiv{   width:250px; height:auto; border:#909090 1px ...

  3. 借助tween.js小球沿div四边跑的动画效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. Div添加阴影效果

    -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/ -webkit-box-shadow: 2px 2px 10px #909090;/*safari或 ...

  5. div加边框

    一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px dashed #000 代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #0 ...

  6. 如何给div加一个边框border样式

    如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...

  7. CSS样式之语法

    选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符(selector):指定样式适用的标签,除指定标签外,样式不起作用 属性:样式的关键字 属性值:描述样式的值: 格式:属性与属性之间使用 ...

  8. CSS3 基本知识

    1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的 ...

  9. css常用样式

    border: border-width border-style border-color (边框属性) 全部属性 div {width:100px; height:100px; border-st ...

随机推荐

  1. 【sklearn决策树算法】DecisionTreeClassifier(API)的使用以及决策树代码实例 - 鸢尾花分类

    决策树算法 决策树算法主要有ID3, C4.5, CART这三种. ID3算法从树的根节点开始,总是选择信息增益最大的特征,对此特征施加判断条件建立子节点,递归进行,直到信息增益很小或者没有特征时结束 ...

  2. js获取页面缩放比例

    今天在网上看到一位大神写的一篇文章,出处记不得了,只是因为我在做项目的时候需要用到所以看了一眼. 经理要求我把两张图表上下排列(非响应式的)改成可以适配浏览器的,刚开始只是想改样式,看到代码才发现原来 ...

  3. react+dva+antd+umi项目建立操作流程及知识点总结

    0.1 引用 0.1.1 react官网 0.1.2 dva官网 0.1.3 antd-mobile官网 0.1.4 umijs官网 0.1.5 转载文章-umi操作手册 一.what are the ...

  4. pyqt5-进度条控制

    1.基于自定义类的方式 继承自QProgressBar类,然后重写timerEvent方法,当该组件设置定时器的时候,会自己处理定时的处理方法,完成相应的功能 from PyQt5.Qt import ...

  5. Android_SharedPreferences实现的自动登录和记住密码

    效果: 先贴一个SharedPreferences工具类: package com.example.didida_corder.ToolClass; import android.content.Co ...

  6. idea 2018.1.2激活方法,有效期至2099年

    1. 下载破解补丁文件JetbrainsCrack-2.7-release-str.jar 链接: https://pan.baidu.com/s/1inWaS067RPte3ZkD6uDxOQ 密码 ...

  7. mysql 时间，时间戳，字符串之间相互转换

    时间转字符串 date_format(now(),'%Y-%m-%d') 时间转时间戳 unix_timestamp(now()) 字符串转时间 str_to_date('2020-01-19','% ...

  8. Python instagram 爬虫项目

    直接介绍一下具体的步骤以及注意点: instagram 爬虫注意点 instagram 的首页数据是 服务端渲染的,所以首页出现的 11 或 12 条数据是以 html 中的一个 json 结构存在的 ...

  9. 本地.local域名访问实现

    苹果的 Bonjour 的多址广播域名服务(mDNS) 使用".local "后缀来识别 Bonjour 可访问的设备 比如树莓派可以用用raspberrypi.local去访问非 ...

  10. redis中获取没有设置ttl过期时间的key

    需求:redis作为一个内存型的数据库,我们需要对过期key保持关注,从info keyspace中可以看出有多少key没有设置过期时间,那么到底是哪些呢? 说明:关于redis ttl 的返回值,请 ...