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. Docker:dockerfile构建php项目 [八]

    一.把项目封装成docker镜像的步骤 把项目封装成docker镜像的步骤: 1.先运行一个基础容器,手动制作docker镜像 2.编写dockerfile,构建镜像 3.测试运行 二.dockerf ...

  2. IaaS,PaaS,SaaS 的区别(转)

    越来越多的软件,开始采用云服务. 云服务只是一个统称,可以分成三大类. IaaS:基础设施服务,Infrastructure-as-a-service PaaS:平台服务,Platform-as-a- ...

  3. js,jQuery获取html5的data-*属性

    今天做项目的时候发现一个坑,关于jQuery获取data-*属性的方法data(),特写此篇来记录. data-*自定义数据属性 HTML5规定可以为元素添加非标准型的属性,只需添加前缀data-,这 ...

  4. slot

    本文涉及的slot有:<slot>,v-slot吗,vm.$slots,vm.$scopedSlots 废弃的使用特性:slot,slot-scope,scope(使用v-slot,2.6 ...

  5. YYS FZU - 2278 (期望)JAVA

    题目链接: G - YYS FZU - 2278 题目大意: 我们现在想要收集到n个卡片,现在已知抽到每种卡片的概率为1/n,现在每隔(n-1)!天就可以进行一次抽奖,问收集齐所有卡片的期望天数. 具 ...

  6. 20175204 张湲祯 2018-2019-2《Java程序设计》 第一周学习总结

    20175204 张湲祯 2018-2019-2<Java程序设计>第一周学习总结 教材学习内容总结 -第一章Java入门要点: -Java的地位:具有面向对象,与平台无关,安全稳定和多线 ...

  7. Python不能用于大型项目?关于Python的10大误解

     语言多元化是PayPal编程文化中一个重要的组成部分.在C++和Java长期流行的同时,更多的团队选择了Jva和Scala.同时,Braintree的收购也引入了一个久经世故的Ruby社区.Pyt ...

  8. tarjan 题目汇总(含解析)

    下面容许我偷个懒,洛谷上写过的blog我就不来再抄一遍了 洛谷P3436 [[POI2006]PRO-Professor Szu](别称:作死的老教授) 洛谷P4306 [[JSOI2010]连通数] ...

  9. C++设计模式——原型模式

    什么是原型模式? 在GOF的<设计模式:可复用面向对象软件的基础>中是这样说的:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.这这个定义中,最重要的一个词是“拷贝”,也就 ...

  10. python学习第23天

    isinstance和issubclass 反射: 反射对象中的内容 反射类中的内容 反射本文件中的内容 反射模块中的内容