<!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. eclipse创建MAVEN项目是出现Could not resolve archetype的解决办法

    eclipse第一次创建MAVEN项目时出现这个问题,查了很多文档改了没用,后来问了别人知道是maven中央仓库下载插件包失败就会报错. 解决办法: 用国内阿里云镜像会好很多 在settings.xm ...

  2. Cstring转char、string、int等数据类型的方法(转载)

    Cstring转char.string.int等数据类型的方法 (-- ::) 转载 标签: 杂谈 分类: VC CString 转char * CString cstr; char *p = (LP ...

  3. Spring Boot 遇到空指针

    @Autowired private IRoadRescueService roadRescueService; 千万不要把注入的service类设为static

  4. centos7.2搭建kubernetes1.5.2+dashboard

    一.    简介 近来容器对企业来说已经不是什么陌生的概念,Kubernetes作为Google开源的容器运行平台,受到了大家的热捧.搭建一套完整的kubernetes平台,也成为试用这套平台必须迈过 ...

  5. python数据结构之图的实现方法

    python数据结构之图的实现方法 本文实例讲述了python数据结构之图的实现方法.分享给大家供大家参考.具体如下: 下面简要的介绍下: 比如有这么一张图:     A -> B     A ...

  6. Soldier and Number Game-素数筛

    Two soldiers are playing a game. At the beginning first of them chooses a positive integer n and giv ...

  7. [00]APUE：GCC / GDB / Makefile

    http://blog.csdn.net/haoel/article/category/9197 http://blog.csdn.net/haoel/article/details/2886  生成 ...

  8. 解决ios10及以上Safari双击和双指缩放无法禁止的问题

    移动端web缩放有两种: 1.双击缩放: 2.双指手势缩放. 在iOS 10以前,iOS和Android都可以通过一行meta标签来禁止页面缩放 <meta content="widt ...

  9. 20140312 Excel表格画折现图次坐标轴

    1.struct 是8字节对齐 2.char * a, sizeof(a)=4; char a[]="abcdefg";sizeof(a)=8; 3.内存对其齐

  10. docker 错误failed to open stream: Permission denied 解决方法

    在服务器上面.运行docker时,php目录会发生权限问题解决方法如下: 1:进入php目录下面 docker exec -ti php56 /bin/bash #进入php容器 chown -R w ...