1. 盒阴影

会产生一个或者多个阴影

  • 使用:    (多个阴影,以逗号隔开)
  •                                       /* (不能为负值) (可以负值) */
    /* 水平方向偏移量 垂直反向偏移量 模糊程度 扩散程度 颜色 是否是内阴影; */ box-shadow: 20px 20px 20px 10px yellowgreen; /* 外阴影上下左右扩10px */
    /* 不会影响布局,即不占位 */
    /* 内阴影在 content 之上 */
    box-shadow: 30px 40px 10px 50px red inset;
    /* 无论偏移量多大,始终在盒子内部 四周向内模糊 四周向内扩
    /* 不影响文本内容 */
  • 应用: 立体圆球(内阴影
  • #box {
    border-radius: 50%;
    box-shadow: -20px -20px 100 #000 inset;
    }
  • 应用: " 影分身 "(多个阴影
  • #box {
    background-color: red;
    box-shadow: 0 20px 0 0 red, 0 60px 0 0 red, 0 100px 0 0 red;
    }
  • 应用: 模糊盒子阴影
  • #box {
    height:; /* 1. width 或者 height 为 0 */ /* 2. 通过扩展程度扩展阴影大小 */
    /* 3. 模糊程度足够大 */
    box-shadow: 0 0 30px 5px red;
    }

2. 倒影 -webkit-box-reflect

  • img {
    margin: 200px 0 0 400px; width: 320px;
    height: 480px; background: ; /* -webkit-box-reflect: 方向 元素与倒影的距离 倒影效果(渐变); */
    -webkit-box-reflect: left 10px linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); // -webkit-box-reflect: right 10px linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); // -webkit-box-reflect: above 10px linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); // -webkit-box-reflect: below 10px linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }

3. 盒子大小可调( resize: both;    overflow: auto ):

  • #box {
    overflow: auto; /* resize 必须配合 overflow 才会生效 */ resize: horizontal; /* 水平方向可调 */
    resize: vertical; /* 垂直方向可调 */
    resize: both; /* 两个方向可调 */
    }

CSS3_盒阴影_倒影_盒子大小可调的更多相关文章

  1. [MFC] MFC 获取指定窗口截图(大小可调)

    void screenShot(CRect rect,int left,int top,char *name){//截取窗口的大小,位置,名字(保存在默认路径下) CBitmap* m_pBitmap ...

  2. CSS3全览_文本+视觉+盒子+背景颜色

    CSS全览_文本+视觉+盒子+背景颜色 目录 CSS全览_文本+视觉+盒子+背景颜色 1. 文本属性 2. 视觉格式化基础 3. 内边距, 边框, 轮廓和外边距 4. 颜色, 背景和渐变 作者: ht ...

  3. CSS3 盒模型---css初始化会用到:box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

  4. 统计_statistics_不同的人_大样本_分析_统计方法_useful ?

    统计_statistics_不同的人_大样本_分析_

  5. 转:HIBERNATE一些_方法_@注解_代码示例---写的非常好

    HIBERNATE一些_方法_@注解_代码示例操作数据库7步骤 : 1 创建一个SessionFactory对象 2 创建Session对象 3 开启事务Transaction : hibernate ...

  6. 迅为4412开发板Linux驱动教程——总线_设备_驱动注册流程详解

    本文转自:http://www.topeetboard.com 视频下载地址: 驱动注册:http://pan.baidu.com/s/1i34HcDB 设备注册:http://pan.baidu.c ...

  7. 宏定义中的##操作符和... and _ _VA_ARGS_ _

    1.Preprocessor Glue: The ## Operator 预处理连接符:##操作符 Like the # operator, the ## operator can be used i ...

  8. 凡客副总裁被曝离职:或因IPO受阻|凡客|王春焕|离职_互联网_新浪科技_新浪网

    凡客副总裁被曝离职:或因IPO受阻|凡客|王春焕|离职_互联网_新浪科技_新浪网 凡客副总裁被曝离职:或因IPO受阻 2013年05月07日 00:56   每日经济新闻    我有话说     每经 ...

  9. 凡客副总裁崔晓琦离职 曾负责旗下V+商城项目_科技_腾讯网

    凡客副总裁崔晓琦离职 曾负责旗下V+商城项目_科技_腾讯网 凡客副总裁崔晓琦离职 曾负责旗下V+商城项目 腾讯科技[微博]乐天2013年09月18日12:44 分享 微博 空间 微信 新浪微博 邮箱 ...

随机推荐

  1. 第四节:Task的启动的四种方式以及Task、TaskFactory的线程等待和线程延续的解决方案

    一. 背景 揭秘: 在前面的章节介绍过,Task出现之前,微软的多线程处理方式有:Thread→ThreadPool→委托的异步调用,虽然也可以基本业务需要的多线程场景,但它们在多个线程的等待处理方面 ...

  2. 《Java》第三周学习总结 20175301

    Java第三周学习总结 首先视频学习了第四章的内容,第四章整体内容较多较复杂,但是整体脉络清晰理解起来很容易,学习 类,方法,对象,组合与复用,实例成员与类成员,包,访问权限,类封装,对象数组等内容 ...

  3. SpringBoot系列: 使用 Swagger 生成 API 文档

    SpringBoot非常适合开发 Restful API程序, 我们都知道为API文档非常重要, 但要维护好难度也很大, 原因有: 1. API文档如何能被方便地找到? 以文件的形式编写API文档都有 ...

  4. Karma (Test runner)

    Karma https://baike.baidu.com/item/%E7%BE%AF%E7%A3%A8/7618552?fromtitle=Karma&fromid=878453 1,意译 ...

  5. 009_Palindrome Number

    #######solution1####### # def isPalindrome(x): # if x<0: # return False # else: # l=str(x) # newl ...

  6. .net 委托多线程 实时更新界面

    Thread thread = new Thread(() => { button2.Invoke(new EventHandler(delegate { button2.Enabled = t ...

  7. Concurrent下的线程安全集合

    1.ArrayBlockingQueue ArrayBlockingQueue是由数组支持的线程安全的有界阻塞队列,此队列按 FIFO(先进先出)原则对元素进行排序.这是一个典型的“有界缓存区”,固定 ...

  8. python中的__len__,__getitem__ __setitem__ __delitem__ __contains__

    可变集合需要实现: __len__  __getitem__    __setitem__  __delitem__不可变集合需要实现: __len__  __getitem__ __len__:返回 ...

  9. Linux下使用crontab对MYSQL进行备份以及定时清

      数据备份是一个项目必需的工作,保证数据库出问题时,将损失减小到最低.本文记录下linux服务器中使用脚本对MYSQL数据备份,并且定时清除7天前的备份. crontab定时备份 1.创建备份目录 ...

  10. python开发遇到的坑(2)mongodb安装路径权限问题

    个人比较懒,Mac 电脑直接使用命令行安装,brew install mongodb,但是遇到两个问题,其一: Error: The following directories are not wri ...