css---盒模型新增样式
box-shadow
以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。
默认值: none 不可继承
值：
inset
默认阴影在边框外。
使用inset后，阴影在边框内。
<offset-x> <offset-y>
这是头两个 <length> 值，用来设置阴影偏移量。
<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。
<offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。
如果两者都是0，那么阴影位于元素后面。
这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。
<blur-radius>
这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。
不能为负值。默认为0，此时阴影边缘锐利。
<spread-radius>
这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素同样大。
<color>
阴影颜色，如果没有指定，则由浏览器决定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
#test{
position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
width: 100px;
height: 100px;
background: pink;
text-align: center;
line-height: 100px; box-shadow: -10px -10px 10px 0px black , 20px 20px 10px -10px deeppink;
}
</style>
</head>
<body>
<div id="test">test</div>
</body>
</html>
-webkit-box-reflect 设置元素的倒影
默认值:none 不可继承
值：（必须是123的顺序）
倒影的方向
第一个值，above, below, right, left
倒影的距离
第二个值，长度单位
渐变
第三个值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
html,body{
height: %;
}
body{
text-align: center;
}
body:after{
content: "";
display: inline-block;
height: %;
vertical-align: middle;
}
img{
vertical-align: middle;
-webkit-box-reflect:left 10px;
}
</style>
</head>
<body>
<img src="img/" width="" height=""/>
</body>
</html>
resize CSS 属性允许你控制一个元素的可调整大小性。
（一定要配合overflow：auto使用）
默认值：none 不可继承
值：
none
元素不能被用户缩放。
both
允许用户在水平和垂直方向上调整元素的大小。
horizontal
允许用户在水平方向上调整元素的大小。
vertical
允许用户在垂直方向上调整元素的大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
html,body{
height: %;
}
body{
text-align: center;
}
body:after{
content: "";
height: %;
display: inline-block;
vertical-align: middle;
}
div{
display: inline-block;
width: 200px;
height: 200px;
background: pink;
vertical-align: middle;
resize :horizontal;
overflow:auto;
}
</style>
</head>
<body>
<div></div>
</bod
box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。
默认值：content-box 不可继承
值
content-box
默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式：
width = 内容的宽度，
height = 内容的高度。
宽度和高度都不包含内容的边框（border）和内边距（padding）。
border-box
width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。
这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: ;
padding: ;
}
div{
width: 200px;
height: 200px;
padding: 50px;
background: pink;
position: absolute;
left: %;
top: %;
margin-left: -100px;
margin-top: -100px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css---盒模型新增样式的更多相关文章
- css 盒模型相关样式
话不多说,一切还是从最基础的说起. 盒的类型 1.盒的基本类型 在css中,用display定义盒的类型,一般分为block类型与inline类型. 例如div属于block类型,span属于in ...
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
- css盒模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和 ...
- 详解CSS盒模型
原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...
- 详解CSS盒模型（转）
详解CSS盒模型 阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- CSS盒模型
CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
- 第 16 章 CSS 盒模型[下]
学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性 使用 vis ...
- 第 16 章 CSS 盒模型[上]
学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 C ...
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
随机推荐
- JUC源码分析-线程池篇（二）FutureTask
JUC源码分析-线程池篇(二)FutureTask JDK5 之后提供了 Callable 和 Future 接口,通过它们就可以在任务执行完毕之后得到任务的执行结果.本文从源代码角度分析下具体的实现 ...
- linux每日命令(2)：ps命令
ps命令真是我比较常用的命令了,只是也没咋仔细研究过,最大的用处就是写代码的时候,起了多进程,就会占用多个进程,如果程序异常了,进程确没有kill掉,那么再启动程序就会报错 正常起项目 如果进程被占用 ...
- 基于OpenResty与Consul实现服务网格ServiceMesh
一.逻辑架构 1.基于OpenResty开发智能代理: 利用其动态可编程特性,动态化配置nginx服务路由: 2.需要向OpenResty添加weibo开源的upsync服务发现模块: 3.基于con ...
- iOS录音后播放声音变小的解决方法
目前需求是录音之后再播放出来.经常会出现播放声音变很小的情况. 解决方法: if (recorder.recording){ [recorder stop]; } [[AVAudioSession s ...
- 检测apache状态，当apache处于非running状态如何脚本启动
编写脚本内容 #!/bin/bashURL="http://127.0.0.1/"curlit(){curl --connect-timeout 15 --max-time 20 ...
- H5在js中向指定的元素添加样式
今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...
- 修改docker镜像地址
vim /etc/docker/daemon.json,使用国内加速站点镜像 https://registry.docker-cn.com http://hub-mirror.c.163.com ht ...
- Java——单例模式初步
1.7 单例模式初步 好书推荐:java与模式 1.7.1 什么是设计模式 设计模式是在大量的实践中总结和理论化之后优选的代码结构.编程风格.以及解决问题的思考方式.设计模式就像是经典的棋谱,不同的棋 ...
- Eureka的表兄弟Zookeeper理论基础
Eureka的表兄弟Zookeeper 简单介绍 Zookeeper是一个开源的分布式应用程序协调服务器,主要功能包括配置维护,域名服务,分布式同步,集群管理等 主要功能简介 一.配置维护 分布式系统 ...
- R语言 环境设置
尝试在线环境 你真的不需要设置自己的环境来开始学习R编程语言. 原因很简单,我们已经在线设置了R编程环境,以便您可以在进行理论工作的同时在线编译和执行所有可用的示例. 这给你对你正在阅读的信心,并用不 ...