css3-盒模型新增属性
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-盒模型新增属性的更多相关文章
- CSS3盒模型温故
CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
- css3 盒模型
0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...
- 第94天：CSS3 盒模型详解
CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...
- 盒模型 box-sizing 属性
css3增添了盒模型box-sizing属性,box-sizing属性值可以有下面三个值: content-box:默认值,让元素维持W3C的标准盒模型.元素的宽度/高度(width/height)( ...
- 盒模型的属性丶display显示丶浮动
一丶盒模型的属性(重要) 1.padding padding是标准文档流,父子之间调整位置 <!DOCTYPE html> <html> <head> <me ...
- 5.css3盒模型--margin/border/padding/content
1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...
- CSS3盒模型之box-sizing
这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的 ...
- CSS3盒模型——box-sizing
box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高. 目 ...
随机推荐
- 指令计数器--Program counter
别名:指令指针.指令地址寄存器.程序计数器: 操作:顺序操作(计数器加一).分支操作(计数器修改): The program counter (PC), commonly called the ins ...
- sum-root-to-leaf-numbers （前序遍历）
class Solution { public: int sumNumbers(TreeNode *root) { ; if (root == NULL) return sum; return pre ...
- go-simplejson文档学习
https://godoc.org/github.com/bitly/go-simplejson 导入方式: import "github.com/bitly/go-simplejson&q ...
- leetcode 206. Reverse Linked List(剑指offer16)、
206. Reverse Linked List 之前在牛客上的写法: 错误代码: class Solution { public: ListNode* ReverseList(ListNode* p ...
- ubuntu 系统查看opencv 的版本
有很多的时候 ,我们想知道自己的电脑里面安装的opencv版本是多少 在终端中运行下面的命令. pkg-config --modversion opencv 为什么要知道自己电脑的opencv 版本, ...
- Android 让图片等比例缩放的三种方法
方法一:客户端等比例 前提条件:服务器端需要返回原始图片的“宽和高”或者“宽高缩放比例”,客户端要显示的图片的宽或者高只要其一是固定的(例如:高度为200,宽度未知,或者高度为400宽度未知) 在这种 ...
- MIPI接口资料汇总（精）
一.介绍 1.MIPI联盟,即移动产业处理器接口(Mobile Industry Processor Interface 简称MIPI)联盟.MIPI(移动产业处理器接口)是MIPI联盟发起的为移动应 ...
- LiveCharts文档-3开始-5序列Series
原文:LiveCharts文档-3开始-5序列Series LiveCharts文档-3开始-5序列Series Strokes和Fills 笔触和填充 所有的Series都有笔触和填充属来处理颜色, ...
- 商场促销-策略模式（和简单工厂模式很像的哇） C#
还是那几句话: 学无止境,精益求精 十年河东,十年河西,莫欺少年穷 学历代表你的过去,能力代表你的现在,学习代表你的将来 废话不多说,直接进入正题: 首先按照大话设计模式的解释,在这里也总结下策略模式 ...
- [JSOI2016]无界单词[动态规划、kmp]
题意 题目链接 分析 对于第一问,枚举最终串最小的相同前后缀来统计答案. 由于最小的相同前后缀也是无界单词,所以可以考虑先求解子问题. 定义状态 \(f(i)\) 表示长度为 \(i\) 的串中有多少 ...