<!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. python_django_静态文件

    什么是静态文件? 是django中用于存放css,js,图片,json文件,字体文件等的文件,使代码更好管理. 1.配置 https://www.cnblogs.com/Vera-y/p/114923 ...

  2. 第二天:PowerShell别名

    1.查询别名: Get-Alias -name ls Get-Alias -name dir Get-Alias -name fl Get-Alias -name ft 2.查看可用的别名 查看可用的 ...

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

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

  4. Python自学:第四章 复制列表（1）

    # -*- coding: GBK -*- my_foods = ['pizza', 'falafel', 'carrot cake'] friend_foods = my_foods[:] prin ...

  5. 沉默的QQ

    QQ很久没有叮咚了,一是没人发消息给我,二是我关了QQ的声音.现在除了几个还在接收消息的群外,其他的群都屏蔽了,有事才上去看看.我从来就没写过QQ空间,那些以前经常写空间的朋友也多数停止了喧闹.每次登 ...

  6. Java获取properties配置文件信息

    调用方法:String url = PropertiesUtil.getProperty("url"); public class PropertiesUtil { public ...

  7. centos 服务器编译安装apache+php

    1.检查服务器中是否自带httpd,如果/etc/httpd/httpd.conf,说明系统自带httpd服务,需要卸载或关闭服务,不要让他影响到本次安装的服务启动 可以用 service httpd ...

  8. DELPHI读取网页源文件和获取字符串

    说到网页采集,通常大家以为到网上偷数据,然后把到收集到的数据挂到自己网上去.其实也可以将采集到的数据做为公司的参考,或把收集的数据跟自己公司的业务做对比等.目前网页采集多为3P代码为多(3P即ASP. ...

  9. NX二次开发-UF_MODL_ask_angle_tolerance获取建模的角度公差

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_ui.h> UF_initialize() ...

  10. fabric.js 限制缩放的最大最小比例

    var rect = new fabrics.Rect({ v: true, top: 216, left: 384, width: 160, height: 90, fill: 'transpare ...