boder属性新特性:

border-radius

 

设置或检索对象使用圆角边框

border-top-left-radius

设置或检索对象左上角圆角边框

border-top-right-radius

设置或检索对象右上角圆角边框

border-bottom-right-radius

设置或检索对象右下角圆角边框

border-bottom-left-radius

设置或检索对象左下角圆角边框

box-shadow

设置或检索对象阴影

border-image

设置或检索对象的边框样式使用图像来填充

border-image-source

设置或检索对象的边框是否用图像定义样式或图像来源路径

border-image-slice

 

设置或检索对象的边框背景图的分割方式

border-image-width

设置或检索对象的边框厚度

border-image-outset

设置或检索对象的边框背景图的扩展

border-image-repeat

设置或检索对象的边框图像的平铺方式

 

border-image:设置或检索对象的边框样式使用图像来填充

<' border-image-source '>:设置或检索对象的边框是否用图像定义样式或图像来源路径。

<' border-image-slice '>:设置或检索对象的边框背景图的分割方式。

<' border-image-width '>:设置或检索对象的边框厚度。

<' border-image-outset '>:设置或检索对象的边框背景图的扩展。

<' border-image-repeat '>:设置或检索对象的边框图像的平铺方式。 

[border-radius 圆角]

         1border-radius可以接收8个属性值,分别表示:

         X(左上、右上、右下、左下角)/Y(左上、右上、右下、左下角)

            eg: border-radius:10px 20px 30px 40px/10px 20px 30px 40px

        2、缩写形式:

            只写X轴,Y轴将默认等于X轴;

            四个角写不全,默认对角相等;

            只写一个值,默认8个数均等;

            eg: border-radius:50px 20px;

              = border-radius:50px 20px 50px 20px;

             = border-radius:50px 20px 50px 20px/50px 20px 50px 20px;

         3、当圆角弧度>=正方形边长一半,将会显示为圆形。

    [border-image 图片边框]

        * 1border-image:一共可以放10个属性值:

            ① 图片的路径: url();

        

            ② 图片的切片宽度: 4个值,分别代表上、右、下、左四条边;

              通过4条切线切割,可以将图片分为9宫格。 9宫格四个角分别对应边框的四个角(不会进行任何拉伸)9宫格四个边分别对应四条边框(会根据设置进行拉伸/铺完/重复等操作)

              注意:写的时候,必须不能带px单位!!!!

        

            ③ 边框的宽度: 4个值,分别代表上、右、下、左四条边框的宽度;

              注意:写的时候,必须带px单位,与切片宽度用/分隔!!!

        

           ④ 边框的重复方式: stretch(拉伸)round(铺满)repeat(重复)

             [roundrepeat的区别]

            round: 会对四条边进行适当的拉伸压缩,确保四条边可以重复整数次;

             repeat:会保持每条边的长度比例不变,可能导致四角处,无法显示一条完整的边;

        2属性值写法:     border-image: ① ②/③px ④;

       

        3 border-imagewebkit内核的浏览器中,必须带-webkit-前缀。

 

    [box-shadow 盒子阴影]

         1 6个属性值,空格分隔:

         ① x轴阴影距离(必选): 可正可负,正——右移,负——左移;

          ② y轴阴影距离(必选): 可正可负,正——下移,负——上移;

          ③ 阴影模糊半径(可选)只能为正,默认为0.数值越大,阴影越模糊;

          ④ 阴影扩展半径(可选)可正可负,默认为0.数值增大,阴影扩大;数值减小,阴影缩小;

          ⑤ 阴影颜色(可选)默认为黑色

          ⑥ 内外阴影(可选)默认为外阴影。  inset表示内阴影;

   

background新增属性

background-origin

 

设置或检索对象的背景图像显示的原点

background-clip

检索或设置对象的背景向外裁剪的区域

background-size

检索或设置对象的背景图像的尺寸大小

background-size: 背景图的大小
 [指定宽度高度]
 宽度高度的指定,可以写px,也可以写%(父容器宽高的百分比)
当写两个属性时,分别表示宽度、高度;
 当写一个属性时,表示宽度,高度将会等比缩放;

其他属性值]
 contain: 图片等比缩放,直到宽或高中较大的一边缩放到100%为止。(可能导致较短的一边<100%,图片无法盖住全部区域)
 cover: 图片等比缩放,直到宽或高中较小的一边缩放到100%为止。(可能导致较大的一边>100%,图片超出区域显示不全)

background-origin
设置或检索对象的背景图像计算 <' background-position '> 时的参考原点(位置)。

  • 对应的脚本特性为backgroundOrigin。

padding-box:从padding区域(含padding)开始显示背景图像

border-box:从border区域(含border)开始显示背景图像。

content-box:从content区域开始显示背景图像。

css3新特性---(border,Background部分)的更多相关文章

  1. css3新特性学习系列 -- border

    css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius  圆角 支持:IE9+ 用法: border-rad ...

  2. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  3. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  4. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  5. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  6. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  7. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  8. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  9. 深入了解css3新特性

    深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

  10. css3新特性总结

    一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...

随机推荐

  1. ABP+AdminLTE+Bootstrap Table权限管理系统第三节--abp分层体系及实体相关

    说了这么久,还没有详细说到abp框架,abp其实基于DDD(领域驱动设计)原则的细看分层如下: 再看我们项目解决方案如下: JCmsErp.Application,应用层:进行展现层与领域层之间的协调 ...

  2. [Usaco2007 Open]Fliptile 翻格子游戏 状态压缩

    考试想到了状压,苦于T1废掉太长时间,于是默默输出impossible.. 我们知道,一个格子的翻转受其翻转次数和它相邻翻转次数的影响. 由每一个位置操作两次相当于把它翻过来又翻回去,所以答案中每一个 ...

  3. css超简单实现div页面居中【适合做弹出框】

    1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...

  4. 小A点菜 洛谷 p1164

    题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家--餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:"随便点". 题目描述 不过ui ...

  5. shell变量的替换,命令的替换,转义字符

    1,shell变量的替换 变量可以根据变量是否为空或者被删除,而被替换为特定的值 ${var}  变量本来的值 $(var:-word)   如果变量为空,或者已被删除那么返回word,但是不改变va ...

  6. python 实现三级菜单

    要求: 可选择进入各级子菜单 在各级菜单下可以选择退出 在子菜单下可以返回上一级菜单 Readme: 运行程序,输入菜单选项,进入对应的子菜单 # Joe Young data = { '山东':{ ...

  7. python基础之数据类型与变量

    一.变量 1 什么是变量之声明变量 #变量名=变量值age=18gender1='male' gender2='female' 2 为什么要有变量 变量作用:"变"=>变化, ...

  8. exit()与_exit()的区别(转)

    http://blog.csdn.net/lwj103862095/article/details/8640037 从图中可以看出,_exit 函数的作用是:直接使进程停止运行,清除其使用的内存空间, ...

  9. 深入解析JavaScript中的this关键字

    如果问初学者js中什么东西比较难懂,很多回答会是this关键字.this在不同场景下所指向的对象不同,这就有一种扑朔迷离的感觉,放佛魔法一般神秘:this到底是什么?这里有四种绑定规则. 1. 默认绑 ...

  10. 【Zookeeper】应用场景

    配置的管理在分布式应用环境中很常见,例如同一个应用系统需要多台server运行,但是他们运行的应用系统的某些配置项是相同的,如果要修改这些相同的配置项,那么就必须同时修改每台运行这应用系统的serve ...