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---盒模型新增样式的更多相关文章

  1. css 盒模型相关样式

    话不多说,一切还是从最基础的说起.  盒的类型  1.盒的基本类型 在css中,用display定义盒的类型,一般分为block类型与inline类型. 例如div属于block类型,span属于in ...

  2. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  3. css盒模型(Box Model)

    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和 ...

  4. 详解CSS盒模型

    原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...

  5. 详解CSS盒模型（转）

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

  6. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  7. CSS盒模型

    CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

  8. 第 16 章 CSS 盒模型[下]

    学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性 使用 vis ...

  9. 第 16 章 CSS 盒模型[上]

    学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 C ...

  10. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

随机推荐

  1. 内网渗透_linux_socks代理_reGeorg+proxychains

    过程演示 测试前提是目标服务器已经getshell. 1.将 reGeorgSocksProxy 中的 tunnel.jsp 文件放置到目标服务器web目录,查看能否正常访问(如图). 2.设置kal ...

  2. codeforces1175E Minimal Segment Cover 倍增

    题目传送门 题意:给出n条平行于x轴的线段,q次询问,每次询问一个区间最少要几条线段来覆盖,若不能覆盖则输出-1. 思路:先考虑贪心,必定是先找到,所有左端点小于等于$x$的线段的右端点最大在哪里,然 ...

  3. 2.Struts2配置文件

    1.配置文件的加载顺序 0. 需要掌握         * 加载了哪些个配置文件(重点的)         * 配置文件的名称是什么         * 配置文件的位置         * 配置文件的 ...

  4. vue之自定义指令

    1.自定义指令的作用 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍 ...

  5. Redis Desktop Manager可视化工具连接不上redis

    1.在centos中启动redis之后,redis进程也是可查的,但是一连接可视化工具就报错: can't connect to redis-server 2.原因分析: ①首先redis是肯定已经开 ...

  6. leetcode-158周赛-5224-掷筛子模拟

    题目描述: 方法:动态规划O(6∗6∗n∗15) 递归: from functools import lru_cache class Solution: def dieSimulator(self, ...

  7. 脚本启动SpringBoot（jar)

    #!/bin/sh RESOURCE_NAME=springbsit-api.jar tpid=`ps -ef|grep $RESOURCE_NAME|grep -v grep|grep -v kil ...

  8. sublime的安装与使用

    1.sublime简介 Sublime是一个代码编辑器,可以编写HTML,php,js,css等文件. Sublime是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具 ...

  9. 取对数求阶乘位数——lightoj1045

    /* 求 n! 在base进制下的位数 取对数,用换底公式,预处理对数前缀和 b^x = n! x = log_b(n!) = log_10(n!)/log_10(b) 对x向上取整即可 */ #in ...

  10. NX二次开发-UFUN获取工程图视图边界线颜色UF_DRAW_ask_border_color

    #include <uf.h> #include <uf_draw.h> #include <uf_ui.h> UF_initialize(); ; UF_DRAW ...