<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>盒子阴影</title>

    <style>

        .box {

            width: 200px;

            height: 200px;

            background-color: orange;

            margin: 200px auto;

            /*opacity: 0;*/

            transition: .3s;

        }

        .box {

            /*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/

            /*box-shadow: -300px 0 10px 0 red, 300px 0 10px 0 blue;*/

        }

        .box:hover {

            margin-top: 195px;

            box-shadow: 0 5px 10px 0 #333;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

盒子阴影 box-shadow的更多相关文章

  1. 盒子显隐，伪类边框，盒子阴影,2d平面形变

    -盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...

  2. 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变

    字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...

  3. 前端,字体图标,盒子显隐,2d形变,盒子阴影

    ---恢复内容开始--- 字体图标 1.将font-awesome-4.7.0文件夹放入项目内 2.在html head中连接 3.在body中导入 盒子显隐 1.使用高度显隐 <p>-- ...

  4. 第50天学习打卡（CSS 圆角边框 盒子阴影 定位）

    4.4圆角边框 圆角边框:  <!DOCTYPE html> <html lang="en"> <head>     <meta char ...

  5. box-shadow(盒子阴影)

    box-shadow 属性可以设置一个或多个下拉阴影的框 可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开.该属性可设置的值包括阴影的X轴偏移量.Y轴偏移量.模糊半径.扩散半径和颜色. 语法: ...

  6. OpenGL阴影，Shadow Volumes（附源程序，使用 VCGlib ）

    实验平台:Win7,VS2010 先上结果截图:    本文是我前一篇博客:OpenGL阴影,Shadow Mapping(附源程序)的下篇,描述两个最常用的阴影技术中的第二个,Shadow Volu ...

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

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

  8. CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

    圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...

  9. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

随机推荐

  1. 【转】硬盘分区知识介绍（MBR）

    转自:http://www.blogjava.net/galaxyp/archive/2010/04/25/319344.html 硬盘是现在计算机上最常用的存储器之一.我们都知道,计算机之所以神奇, ...

  2. 关于a标签的href属性值的区别

    一.href="javacript:;"  这种用法不正确,这么用的话会出现浏览器访问“javascript:;”这个地址的现象: 二.href="javacript:v ...

  3. Delphi Format函数功能及用法详解

    DELPHI中Format函数功能及用法详解 DELPHI中Format函数功能及用法详解function Format(const Format: string; const Args: array ...

  4. StringUtils工具类常用api <转>

    该工具类是用于操作Java.lang.String类的. StringUtils类与String类的区别在于:此类是null安全的,即如果输入参数String为null,则不会抛出NullPointe ...

  5. 好久没写题解了＝ ＝这次是bzoj 1051

    唉＝ ＝这道题我都想到了tarjan缩点,但是没有想到最后一步啊＝ ＝我们很容易想到反向建边然后缩点,这时候我们看由多少个联通块的入度为0,如果为1个,那就输出这个块的大小,否则输出0: #inclu ...

  6. 依赖背包变形——poj1947（经典）

    /*这题显然不适用依赖背包的优化,因为不能保证根是必选的,但是可以按照常规依赖背包的思路进行转移,即每次对一个儿子进行C^2的转移 还是树形的背包,dp[u][j]表示u的子树里,切割出一个大小为j的 ...

  7. OpenSceneGraph | OSG如何存储带纹理osgb格式可以节省空间

      在使用OSG(OpenSceneGraph)存储带纹理osgb格式的过程中,大家会遇到这样一种情况:存储后的osgb文件所占用的大小远大于原始文件的大小,几倍至几十倍.这是为何呢?原因是OSG默认 ...

  8. 关于对现阶段vue项目的一些总结和感想

    一.前言 现阶段手上vue的项目差不多快完了,空闲之余回反复对整个项目的代码结构.实现细节以及框架上的做了一些思考和优化.下面打算把想到的和重点实现的方法记录一下. 二.回顾 对于常规操作,这里不做过 ...

  9. mac 安装配置使用 mongoldb

    mac 安装配置使用 mongoldb 安装和配置 brew install mongos brew install mongo # 密码就是用户的密码 # 配置数据文件 //如果不配置会出现错误62 ...

  10. LeetCode 445. Add Two Numbers II (两数相加 II)

    题目标签:Linked List 题目给了我们两个 数字的linked list,让我们把它们相加,返回一个新的linked list. 因为题目要求不能 reverse,可以把 两个list 的数字 ...