<!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. Java内存管理简述

    转自:http://www.codeceo.com/article/java-memory-area.html 一.概述 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干不同的数据 ...

  2. selenium 自动下载文件

    #coding=utf-8 from selenium import webdriver #实例化一个火狐配置文件 fp = webdriver.FirefoxProfile() #设置各项参数,参数 ...

  3. cehsi

    weibo https://oapi.dingtalk.com/robot/send?access_token=8c9ef96c99925383347c5f9f733ad6b8579c3f8ad072 ...

  4. JUC 一 FutureTask

    java.util.concurrent public class FutureTask<V> implements RunnableFuture<V> 简介 FutureTa ...

  5. 分布式项目controller项目中web.xml配置文件的编写

    <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" " ...

  6. vue.js 2.0 --- 安装node环境,webpack和脚手架(入门篇)

    1.环境搭建 1.1.安装node.js 1.2 安装过程很简单,一路“下一步”就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号 ...

  7. struts之ActionServlet

    ActionServlet类是Struts框架的内置核心控制器组件,它继承了javax. servlet.http.HttpServlet类,Struts的启动一般从加载ActionServlet开始 ...

  8. bzoj1034题解

    [解题思路] 广义田忌赛马的贪心模型.如果当前实力最差的马比对手实力最差的马强,则匹配:如果当前实力最强的马比对手实力最强的马强,亦匹配:若上述两点均不成立,拿己方最差的马去匹配对手最强的马.复杂度O ...

  9. Delphi如何实现无边框窗体的移动

    在控件的MouseDown事件中加入if (ssleft in Shift) then begin ReleaseCapture; Perform(WM_syscommand, $F012, 0);e ...

  10. Go的异常处理 defer, panic, recover

    Go语言追求简洁优雅,所以,Go语言不支持传统的 try…catch…finally 这种异常,因为Go语言的设计者们认为,将异常与控制结构混在一起会很容易使得代码变得混乱.因为开发者很容易滥用异常, ...