CSS3 新特性(box-sizing盒模型,背景线性渐变,filter滤镜,calc函数,transition过渡)
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过渡)的更多相关文章
- Css3新特性总结之边框与背景(一)
本系列主要总结Css3一些新特性的认识,来源于<css揭秘>书. 一.半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360):s:饱合度(0%~100%) ...
- Css3新特性总结之边框与背景(二)
一.条纹背景 利用background为linear-gradient函数实现,linear-gradient取值如下: <angle>:角度,渐变的方向 to left right to ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- HTML5新规范和CSS3新特性
1.HTML5最新规范(HTML5是HTML.XHTML以及HTML.DOM的新标准) ①用于绘画canvas元素 ②用于媒介回放的video和audio元素 ③对本地离线存储的更好支持 ④新的特俗内 ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- HTML5,CSS3新特性,与旧版的区别
HTML5新特性 (1)语意化更好的内容元素,比如 article.footer.header.nav.section (2)本地存储.sessionStorage.localStorage和inde ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
随机推荐
- leetcode-7-整数翻转
问题: package com.example.demo; public class Test7 { /** * 整数翻转 123,-123,120等数字 * 思路: * 1.获取原始数字的%10的余 ...
- mapreduce实验
代码: public class WordCount { public static void main(String[] args) throws IOException, ClassNotFoun ...
- HTTP请求方式: GET和POST的比较
GET和POST是HTTP的两个常用方法. 什么是HTTP? 超文本传输协议(HyperText Transfer Protocol -- HTTP)是一个设计来使客户端和服务器顺利进行通讯的协议 ...
- BUUCTF 梅花香自苦寒来
梅花香自苦寒来 打开图片可以看到,在jpg后面有大量的数据,将它保存出来,可以看出是十六进制,将它转为ascii,写脚本 with open('hex.txt','r') as h: h=h.read ...
- linux下有趣的工具
1.toilet(在CentoOS7 安装) yum install -y https://raw.githubusercontent.com/sliqua-hosting/repo/master/c ...
- 【学习总结】Python-3-多个变量赋值
菜鸟教程-Python3-基本数据类型 同时为多个变量赋值的两种格式: 连等:看起来可能错误但事实上Python可以这样的.... 一团变量对应一团值:比较常见又省事的格式 END
- 使用jxls导出Excel报表
导入jar包: <dependency> <groupId>net.sf.jxls</groupId> <artifactId>jxls-core< ...
- enumerate()(Python)
>>> E=enumerate('spam') >>> E <enumerate object at 0x1021ceca8> >>> ...
- Halo(四)
BeanWrapper 接口 操作属性 package org.springframework.beans; BeanWrapper bw = new BeanWrapperImpl(beanObje ...
- MariaDB 删除表
在本章中,我们将学习删除表. 表删除很容易,但记住所有删除的表是不可恢复的. 表删除的一般语法如下 - DROP TABLE table_name ; 存在执行表删除的两个选项:使用命令提示符或PHP ...