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来指定宽高. 目 ...
随机推荐
- 理解OSI参考模型
在一个视频网站上不小心搜到网络知识的视频,突然以前大学的没有真正接受的知识点,一下子豁然开朗,赶紧整理了下笔记. 一.OSI参考模型 自下而上:物理层(物理介质,比特流).数据链路层(网卡.交换机). ...
- Idea设置快捷键以及修改Eclipse的debug快捷键
Idea强大不多说了,用久了都可以习惯,但是感觉Idea的debug真是不如eclipse好用,Idea的快捷键都是组合键,用着繁琐.两种方法可以设置eclipse的快捷键: 1:直接全局都使用ecl ...
- OpenSCAD(1)基础教程
https://blog.csdn.net/freewebsys/article/details/49993049 官网 https://en.wikibooks.org/wiki/OpenSCAD_ ...
- 测试的W模型
- sql截取日期/时间的单独部分,比如年、月、日、小时、分钟等等
可以使用EXTRACT() 函数.(oracle和mysql都有该函数) 语法: EXTRACT(unit FROM date) date 参数是合法的日期表达式.unit 参数可以是下列的值:YEA ...
- WebSocket原理与实践(二)---WebSocket协议
WebSocket原理与实践(二)---WebSocket协议 WebSocket协议是为了解决web即时应用中服务器与客户端浏览器全双工通信问题而设计的.协议定义ws和wss协议,分别为普通请求和基 ...
- excel保存为制表符分隔的文本文件 js无法完整读取
excel保存为制表符分隔的文本文件 js无法完整读取 excel另存为文本有两个选项,一个是制表符分隔的文本文件,一个是unicode文本.生成的文件Unicode更大一些.但是这里需要注意的是[制 ...
- java算法----排序----(6)希尔排序(最小增量排序)
package log; public class Test4 { /** * java算法---希尔排序(最小增量排序) * * @param args */ public static void ...
- 【SQL】四种排序开窗函数
一 .简单了解什么是开窗函数 什么是开窗函数,开窗函数有什么作用,特征是什么? 所谓开窗函数就是定义一个行为列,简单讲,就是在你查询的结果上,直接多出一列值(可以是聚合值或是排序号),特征就是带有ov ...
- eclipse取消空格、等号、分号自动录入
默认eclipse中按空格.等号.分号等键时,会将提示框中的文字输入到编辑内容中,但是很多时候我们并不希望录入,可如下设置. 1.打开 Eclipse -> Window -> Perfe ...