css3新特性总结
一、什么是css3
css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂。css3完全向后兼容
二、css3新特性
1、边框
css3的边框有如下属性:
(1)、border-radius:圆角边框,示例如下:
效果如下所示:
(2)、box-shadow:边框阴影,示例如下:
效果如下所示:
(3)、border-image:边框图片,示例如下:
效果如下所示:
2、背景
(1)、background-size
css3中规定背景图片的尺寸,可以设置重复的背景图片。之前是由图片的实际尺寸决定的。
(2)、background-origin
规定背景图片的定位区域,此属性可以将多个图片整合成一个图片。有利于减少HTTP请求。
3、文本效果
(1)、text-shadow,文本阴影,示例如下:
效果如下:
(2)、word-wrap,文本换行,示例如下:
效果如下:
4、字体
css3中使用@font-face规则定义字体,指向字体的文件,在HTML中使用font-family属性引用字体的名称。
5、2D转换
(1)、translate()移动,示例如下:
(2)、rotate()旋转,示例如下:
(3)、scale()元素的缩放,示例如下:
(4)、skew()元素根据x轴或者y轴进行翻转,示例如下:
(5)、matrix()定义2D转换,使用六个值的矩阵。
6、3D转换
7、过渡
transition简写属性,用于在一个属性中设置四个过渡属性。示例如下:
8、动画
css3中能够创建动画,可以在许多网页中取代动画图片,flash动画以及JavaScript。
创建动画需要学习@keyframes规则,form表示开始。to表示结束,也可以使用百分比设置。示例如下:
9、多列
(1)、column-count规定元素被分割的列数,示例如下:
效果如下:
(2)、column-gap规定列之间的间隔,示例如下:
(3)、column-rule设置列之间的宽度、样式和颜色规则。示例如下:
10、用户界面
(1)、resize规定是否可由用户调整元素尺寸。
(2)、box-sizing允许你以确切的方式定义适应某个区域的具体内容。
(3)、outline-offset对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
三、总结
此次经历面试后才发现自己css3方面学过的都忘记了,值此空闲时间做一些笔记加深记忆。
css3新特性总结的更多相关文章
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- 深入了解css3新特性
深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- css3新特性学习系列 -- border
css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius 圆角 支持:IE9+ 用法: border-rad ...
随机推荐
- WCF系列_WCF影响客户端导出Excel文件的实现
需求:WCF搭建服务端提供导出并下载Excel文件接口,客户端使用ajax发起请求,浏览器直接下载Excel文件. 难点:WCF中并没有HttpContext对象,因此,服务端总是获取不到HttpCo ...
- 关于python的感想和turtle作图
第一次知道有python这个东西是在去年七月份,就是一堆编程语言,当时我想它应该离我很远,也没对它有什么兴趣.直到在三月份的某一天我真正接触了它,其实也不是我主动,环境下学期必须学这东西.我有它的必修 ...
- MyBatis 一级缓存,二级缓存,延迟加载设置
1 什么是延迟加载 resultMap中的association和collection标签具有延迟加载的功能. 延迟加载的意思是说,在关联查询时,利用延迟加载,先加载主信息.使用关联信息时再 ...
- kbmmw 5.08 正式发布
欢迎大家围观. Important notes (changes that may break existing code) ============================= ...
- 中标麒麟(linux)下Qt调用python数据转换
转自:https://blog.csdn.net/itas109/article/details/78733478 mytest.py文件 # -*- coding: utf-8 -*- def he ...
- Executors创建的4种线程池的使用
Java通过Executors提供四种线程池,分别为:newCachedThreadPool创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活回收空闲线程,若无可回收,则新建线程.newFixe ...
- 【慕课网实战】二、以慕课网日志分析为例 进入大数据 Spark SQL 的世界
MapReduce的局限性: 1)代码繁琐: 2)只能够支持map和reduce方法: 3)执行效率低下: 4)不适合迭代多次.交互式.流式的处理: 框架多样化: 1)批处理(离线):MapRed ...
- expdp错误案例
转自:https://www.cnblogs.com/kerrycode/p/3960328.html Oracle数据泵(Data Dump)使用过程当中经常会遇到一些奇奇怪怪的错误案例,下面总结一 ...
- 交叉编译ffmpeg(hi3520d)
./configure \--prefix=/usr/local/ffmpeg-3520D \--cross-prefix=/opt/hisi-linux-nptl/arm-hisiv100-linu ...
- php倒计时
<form name="form1"> <div align="center" align="center"> &l ...