box-shadow：跟text-shadow类似，可多层叠加

box-shadow:[inset] x y blur [spread] color

inset:投影方式，inset内投影，不加参数外投影

spread扩展阴影半径，先扩展，再模糊

box-reflect：倒影，只有webkit

-webkit-box-reflect:below;

-webkit-box-reflect:left;

-webkit-box-reflect:right;

-webkit-box-reflect:above;

-webkit-box-reflect:right 10px;倒影跟元素之间产生的距离，可选参数

<style>

img{display:block; margin:200px auto;

height:200px;height:200px;

-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);}

</style>

</head>

<body>

<img src="../前端背景图/14873699.jpg" />

</body>

效果如图：

resize与overflow：auto配合使用

resize：both水平垂直都可以缩放

resize：horizontal只有水平可以缩放

resize：vertical只有垂直可以缩放

<style>

.box{border:5px solid black; resize:both; overflow:auto; height:200px;width:200px;}

</style>

</head>

<body>

<div class="box"></div>

</body>

box-sizing盒模型解析模型

content-box标准盒模型height/width=border+padding+content

border-box怪异盒模型height/width=content

<style>

.box{width:200px; height:200px;padding:50px; border:10px solid black; box-sizing:content-box;}

.div{height:50px; background:red;}

</style>

</head>

<body>

<div class="box">

	<div class="div"></div>

</div>

</body>

效果如图：

<style>

.box{width:200px; height:200px;padding:50px; border:10px solid black; box-sizing:border-box;}

.div{height:50px; background:red;}

</style>

</head>

<body>

<div class="box">

	<div class="div"></div>

</div>

</body>

效果如图：

css3-盒模型新增属性的更多相关文章

  1. CSS3盒模型温故

    CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...

  2. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  3. css3 盒模型记

    css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...

  4. css3 盒模型

    0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...

  5. 第94天：CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  6. 盒模型 box-sizing 属性

    css3增添了盒模型box-sizing属性,box-sizing属性值可以有下面三个值: content-box:默认值,让元素维持W3C的标准盒模型.元素的宽度/高度(width/height)( ...

  7. 盒模型的属性丶display显示丶浮动

    一丶盒模型的属性(重要) 1.padding padding是标准文档流,父子之间调整位置 <!DOCTYPE html> <html> <head> <me ...

  8. 5.css3盒模型--margin/border/padding/content

    1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...

  9. CSS3盒模型之box-sizing

    这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的 ...

  10. CSS3盒模型——box-sizing

    box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高. 目 ...

随机推荐

  1. web笔试

    类型判断用到哪些方法? typeof和instanceof 值类型和引用类型的区别? 根据 JavaScript中的变量类型传递方式,又分为值类型和引用类型,在参数传递方式上,值类型是按值传递,引用类 ...

  2. 基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码

    比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 ...

  3. 网络编程_UDP协议_发送端与接收端

    创建UDP传输的发送端 : 1.建立udp的socket服务   2.将要发送的数据封装到数据包中   3.通过udp的socket服务 将数据包发送出去   4.关闭socket服务(因为调用了系统 ...

  4. BZOJ 1444:[JSOI2009]有趣的游戏

    BZOJ 1444:[JSOI2009]有趣的游戏 题目链接 首先我们建出Trie图,然后高斯消元. 我们设\(f_i\)表示经过第\(i\)个点的期望次数: \[ f_x=\sum i\cdot p ...

  5. CentOS6.9 安装Oracle 11G 版本11.2.0.1.0

    安装实例与数据库 CentOS6.9 安装Oracle 11G 版本11.2.0.1.0 一.检查系统类别. 查看 系统的类别,这里是 64位系统:[root@localhost ~]# uname ...

  6. k8s部署spring-boot项目失败

    现象:spring-boot项目启动到某个地方停止,然后容器重启 解决:扩大内存和核心数

  7. Qt中静态变量使用方法

    静态变量可以在各个页面之前使用 先定义一个用于存放静态变量的类 例如datavar 在datavar.h中添加如下代码 #ifndef DATAVAR_H #define DATAVAR_H #inc ...

  8. 数据库连接不关闭造成的问题以及RowSet的使用

    这几天给项目做性能压力测试,发现一个方法压力200之后就会把整个系统弄停掉.仔细检查发现是开发人员调用数据库的写法有问题.用的是spring的jdbcTemplate,在使用回调的时候,在回调里又做了 ...

  9. Nginx-PHP优化设置 + lnmp调优的关键影响因素 + php-fpm + nginx返回码 + tcp调优 + 最大文件描述符

    https://www.cnblogs.com/zengkefu/p/5602473.html最大文件描述符 https://blog.csdn.net/fanren224/article/detai ...

  10. [julia]本地离线安装package

    1.引言 julia最近十分受关注,其结合了python的通用性,Ruby的动态性,C的代码运行速度,R的包管理和数据分析功能,perl的字符串处理能力,lisp的宏能力,matlab的矩阵计算规则, ...