1.盒子模型(box-sizing)

CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box、border-box,这样我们计算盒子大小的方式就发生了改变。

可分为两种情况:

 1. box-sizing:content-box   盒子大小为 width + padding + border(默认)

 2. box-sizing:border-box     盒子大小为 width

 如果盒子模型我们改为了 box-sizing:border-box,那么 padding 和 border 就不会撑大盒子了(前提 padding 和 border 不会超过 width 宽度)

2. 背景线性渐变

 语法:

  background:linear-gradient(起始方向,颜色1,颜色2,....);

  background:-webkit-linear-gradient(left,red,blue);

  background:-webkit-linear-gradient(left  top,red,blue);

 背景渐变必须添加浏览器私有前缀(兼容性差)

 起始方向可以是:方位名词  或者  度数,如果省略默认是 top

3. CSS3 滤镜(filter)

 filter CSS属性将模糊或颜色偏移等图像效果应用于元素

 filter:函数( );   例如:filter:blur( 5px );   blur 模糊处理,数值越大越模糊

4. CSS3 calc 函数

 calc( ) 在声明CSS属性值时执行一些计算

 width:calc(100% - 30px);   // 宽度永远比父盒子(本身)小 30 像素

 括号里面可以使用 +  -  *  /   来计算

5. CSS3 过渡(重点)

 transition:要过渡的属性  花费时间  运动曲线   何时开始;

 属性:想要变化的 CSS 属性,宽度,高度,背景颜色,内外边距都可以,如果想要所有属性都变化过渡,写一个 all 就可以

 花费时间:单位是 秒(s)必须写单位   例如:0.5s

 运动曲线:默认是 ease(可以省略),linear(匀速),ease-in( 加速 ,ease-out(减速),ease-in-out(先加速后减速)

 过渡使用口诀:谁做过渡给谁加(经常搭配 :hover 使用)

CSS3 新特性(box-sizing盒模型,背景线性渐变,filter滤镜,calc函数,transition过渡)的更多相关文章

  1. Css3新特性总结之边框与背景(一)

    本系列主要总结Css3一些新特性的认识,来源于<css揭秘>书. 一.半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360):s:饱合度(0%~100%) ...

  2. Css3新特性总结之边框与背景(二)

    一.条纹背景 利用background为linear-gradient函数实现,linear-gradient取值如下: <angle>:角度,渐变的方向 to left right to ...

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

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

  4. HTML5和CSS3新特性

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

  5. H5 和 CSS3 新特性

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

  6. HTML5新规范和CSS3新特性

    1.HTML5最新规范(HTML5是HTML.XHTML以及HTML.DOM的新标准) ①用于绘画canvas元素 ②用于媒介回放的video和audio元素 ③对本地离线存储的更好支持 ④新的特俗内 ...

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

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

  8. HTML5,CSS3新特性,与旧版的区别

    HTML5新特性 (1)语意化更好的内容元素,比如 article.footer.header.nav.section (2)本地存储.sessionStorage.localStorage和inde ...

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

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

随机推荐

  1. leetcode-7-整数翻转

    问题: package com.example.demo; public class Test7 { /** * 整数翻转 123,-123,120等数字 * 思路: * 1.获取原始数字的%10的余 ...

  2. mapreduce实验

    代码: public class WordCount { public static void main(String[] args) throws IOException, ClassNotFoun ...

  3. HTTP请求方式: GET和POST的比较

    GET和POST是HTTP的两个常用方法.   什么是HTTP? 超文本传输协议(HyperText Transfer Protocol -- HTTP)是一个设计来使客户端和服务器顺利进行通讯的协议 ...

  4. BUUCTF 梅花香自苦寒来

    梅花香自苦寒来 打开图片可以看到,在jpg后面有大量的数据,将它保存出来,可以看出是十六进制,将它转为ascii,写脚本 with open('hex.txt','r') as h: h=h.read ...

  5. linux下有趣的工具

    1.toilet(在CentoOS7 安装) yum install -y https://raw.githubusercontent.com/sliqua-hosting/repo/master/c ...

  6. 【学习总结】Python-3-多个变量赋值

    菜鸟教程-Python3-基本数据类型 同时为多个变量赋值的两种格式: 连等:看起来可能错误但事实上Python可以这样的.... 一团变量对应一团值:比较常见又省事的格式 END

  7. 使用jxls导出Excel报表

    导入jar包: <dependency> <groupId>net.sf.jxls</groupId> <artifactId>jxls-core< ...

  8. enumerate()(Python)

    >>> E=enumerate('spam') >>> E <enumerate object at 0x1021ceca8> >>> ...

  9. Halo(四)

    BeanWrapper 接口 操作属性 package org.springframework.beans; BeanWrapper bw = new BeanWrapperImpl(beanObje ...

  10. MariaDB 删除表

    在本章中,我们将学习删除表. 表删除很容易,但记住所有删除的表是不可恢复的. 表删除的一般语法如下 - DROP TABLE table_name ; 存在执行表删除的两个选项:使用命令提示符或PHP ...