1.边框

  border-radius: 1-4 length|% / 1-4 length|%;

    每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。若省略左下角,和右上角相同,省略右下角,左上角相同,省略右上角,和左上角相同。

    border-top-left-radius: 20px 50px;

     

  box-shadow: h-shadow v-shadow blur spread color inset;

    h-shadow  水平阴影位置,允许负值。必需

    v-shadow  垂直阴影位置,允许负值。必需

    blur  模糊距离

    spread  阴影大小

    color  阴影颜色

    inset  从外层的阴影改变阴影内测阴影

    box-shadow: 10px 10px 5px 5px #dddddd;

      

  border-image: source slice width outset repeat|initial|inherit;

    border-image-source: url(border.png)

      用于指定要用于绘制边框的图像

    border-image-slice: number | % | fill;

      number  数字表示图像的像素或向量的坐标

      %  百分比图像的大小是相对的:水平偏移图像的宽度,垂直偏移图像的高度

      fill  保留图像的中间部分

      指定顶部,右,底部,左边缘的图像向内偏移,分为九个区域:四个角,四边和中间。图像中间部分将被丢弃(完全透明的处理),除非填写关键字。

       如果省略第四个,它和第二个相同,省略第三个,它和第一个相同,省略第二个,它和第一个相同

    border-image-width: number | % | auto;

      图像边界宽度,四个值用于吧border图像区域分为九个部分。代表上,右,底部,左,两侧向内距离。若第四个值被省略,他和第二个是相同的,

       第三个省略,和第一个是相同的。如果也省略了第二个,他和第一个是相同的。不允许拥有负值

    border-image-outset: length | number; 

      指定在边框外部绘制 border-image-area 的量,包括上下部和左右部分,若第四个值被省略,他和第二个是相同的,第三个省略,和第一个是相同的。

       如果也省略了第二个,他和第一个是相同的。不允许拥有负值

    border-image-repeat: stretch | repeat | round | initial | inherit;

      stretch  默认值。拉伸图像来填充区域

      repeat  平铺图像来填充区域

      round  类似repeat。如果无法完整平铺所有图像,则对图像进行缩放以适应区域

      space  类似repeat。如果无法完整平铺所有图像,扩展空间会分布在图像周围

      initial  将此属性设置为默认值

      inherit  从父元素中继承该属性

  

2.背景

  background-image  添加背景图片

  background-size  背景图片的大小

  background-origin  指定了背景图像的位置区域

    

  background-clip  背景剪裁属性是从指定位置开始绘制

    border-box  默认值。

    padding-box

    content-box

3.渐变

  可以再两个或多个指定的颜色之间显示平稳的过渡

  线性渐变(Linear Gradients)  向下/向上/向左/向右/对角方向

  径向渐变(Radial Gradients)  由它们的中心定义

CSS3 新特性总结的更多相关文章

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

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

  2. Atitti css3 新特性attilax总结

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

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

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

  4. 深入了解css3新特性

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

  5. H5 和 CSS3 新特性

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

  6. css3新特性总结

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

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

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

  8. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

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

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

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

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

随机推荐

  1. MongoDB联表查询

    表A: id name --------------------------- 1 Tom 2 Roger 3 Mars 4 Brent 表B: id result ----------------- ...

  2. 认证授权:学习OAuth协议

    1.什么是OAuth协议? OAUTH协议为用户资源的授权提供了一个安全的.开放而又简易的标准.同时,任何第三方都可以使用OAuth认证服务,任何服务提供商都可以实现自身的OAuth认证服务,因而OA ...

  3. 状态压缩动态规划(状压DP)详解

    0 引子 不要999,也不要888,只要288,只要288,状压DP带回家.你买不了上当,买不了欺骗.它可以当搜索,也可以卡常数,还可以装B,方式多样,随心搭配,自由多变,一定符合你的口味! 在计算机 ...

  4. 卡方检验(Chi_square_test): 原理及python实现

    概述 What for?主要用在某个变量(或特征)值是不是和应变量有显著关系,换种说法就是看某个变量是否独立 \(X^2=\sum{\frac{(observed-expected)^2}{expec ...

  5. 23种设计模式 - 数据结构(Composite - iterator - Chain of Responsibility)

    其他设计模式 23种设计模式(C++) 每一种都有对应理解的相关代码示例 → Git原码 ⌨ 数据结构 Composite 动机(Motivation) 软件在某些情况下,客户代码过多依赖于对象容器复 ...

  6. Laravel chunk和chunkById的坑

    Laravel chunk和chunkById的坑 公司中的项目在逐渐的向Laravel框架进行迁移.在编写定时任务脚本的时候,用到了chunk和chunkById的API,记录一下踩到的坑. 一.前 ...

  7. 【深入理解Java虚拟机】Java虚拟机运行时数据区

    Java虚拟机运行时数据区 线程私有 程序计数器 1.当前线程所执行的字节码的行号指示器. 2.唯一不会发生OutOfMemoryError的区域 3.如果执行的是java方法,计数器值为虚拟机字节码 ...

  8. 使用kind快速创建本地集群

    简 介 kind是另一个Kubernetes SIG项目,但它与minikube有很大区别.它可以将集群迁移到Docker容器中,这与生成虚拟机相比,启动速度大大加快.简而言之,kind是一个使用Do ...

  9. Android开发之模拟器genymotion安装apk出现错误: Install_failed_invalid_URI

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985,转载请说明出处. install failed invalid uri Android开发之模拟器ge ...

  10. 【Spring注解驱动开发】AOP核心类解析,这是最全的一篇了!!

    写在前面 昨天二狗子让我给他讲@EnableAspectJAutoProxy注解,讲到AnnotationAwareAspectJAutoProxyCreator类的源码时,二狗子消化不了了.这不,今 ...