面试总结【css篇】- css3新增特性
1.css3中的关键帧
@keyframes规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。这
比转换更能控制动画序列的中间步骤。
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
} to {
margin-left: 0%;
width: 100%;
}
}
JavaScript 可以通过 CSS对象模型接口CSSKeyframesRule
来访问 @keyframes
要使用关键帧, 先创建一个带名称的@keyframes
规则,以便后续使用 animation-name
这个属性来将一个动画同其关键帧声明匹配。每个@keyframes
规则包含多个关键帧,也就是一段样式块语句,每个关键帧有一个百分比值作为名称,代表在动画进行中,在哪个阶段触发这个帧所包含的样式。
2.颜色的表示方法:rgba
3.transparent,控制透明度(这个可以实现三角形)
div {
width:;
/* border-top: red solid 5px;
border-left: transparent solid 5px;
border-bottom: transparent solid 5px;
border-right: transparent solid 5px; */
border: 16px solid red;
border-color: transparent red transparent transparent;}
4.边框的属性
(1) 边框圆角
border-radius: 左上角 右下角 右下角 左下角
(2) 边框阴影
box-shadow: 水平距离 垂直距离 模糊距离 阴影尺寸 颜色 inset(内阴影)
(3) 边框图片
5.文本属性
1) 文本阴影
text-shadow: 2px(水平,可为负数) 3px(垂直,可为负数) 2px(模糊距离,不能为负数) red;
2) 文本描边
-webkit-text-stroke:宽度 颜色
3) 溢出省略
text-overflow:ellipse(省略号);要和overflow: hidden; white-space:nowrap使用。
6.css3渐变
面试总结【css篇】- css3新增特性的更多相关文章
- CSS3新增特性详解(二)
上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器.多背景图.阴影.渐变等.本文主要介绍CSS3中新增的动态特性,如过度.动画.变形等. transitian: -webkit-tran ...
- CSS3新增特性详解(一)
注:由于CSS3的新特性较多,所以分两篇博文来说明.第一篇主要包括新的选择器.文字及块阴影.多背景图.颜色渐变.圆角等.第二篇主要细说CSS3的各种动画效果,如:旋转.移动.缩放等,还包括图标字体的应 ...
- 奇妙的CSS之CSS3新特性总结
随着CSS3标准的发布,越来越多的浏览器开始支持最新的CSS标准,虽然还有些新特性支持的不够完美,但相信未来的浏览器一定会完全支持CSS3的,毕竟这代表着大趋势!下面l列出来一些CSS3中出现的新特性 ...
- HTML5与CSS3新增特性笔记
HTML5 HTML5和HTML事件 注意:行内代码的为H5新增事件 Window事件属性: 针对 window 对象触发的事件(应用到 标签) onafterprint 文档打印之后运行的脚本 on ...
- CSS3新增特性及知识学习线路
- CSS3新增特性\HTML标签类型
RGBA:透明度 作用: 设置透明度(R G B A) opacity:不透明度 文字也会被设置不透明度 圆角 border-radius:圆角{左上角,右上角.. ...
- CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性
CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1) id选择器(# myid) ...
- web前端面试试题总结---css篇
CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
随机推荐
- VC内联汇编,引用程序中的变量
int a=5; //变量a _asm { mov eax,a; //将变量a的值放入寄存器eax add eax,eax; //相当于a=a+a mov a,eax; // ...
- Codeforces 1119E Pavel and Triangles (贪心)
Codeforces Global Round 2 题目链接: E. Pavel and Triangles Pavel has several sticks with lengths equal t ...
- FreeBSD_11-系统管理——{Part_9-SVN}
一.使用 svn / svnlite 代替 freebsd-update 及 portsnap 等常规工具更新系统及 ports 源码 二.安装可信 ca 机构列表 cd /usr/ports/sec ...
- No parameter name specified for argument of type
在使用SpringMVC绑定基本类型(如String,Integer等)参数时,应通过@RequestParam注解指定具体的参数名称,否则,当源代码在非debug模式下编译后,运行时会引发Handl ...
- Pandas重复值处理
import pandas as pd #生成数据 data1,data2,data3,data4=['a',3],['b',2],['a',3],['c',2] df=pd.DataFrame([d ...
- 自定义hive文件和记录格式及文本文件数据编码
(1)一段 建表语句: [ROW FORMAT row_format] [STORED AS file_format] | STORED BY 'storage.handler.class.name' ...
- python+tushare获取股票每日停复牌信息
接口:suspend 更新时间:不定期 描述:获取股票每日停复牌信息 注:tushare模块下载和安装教程,请查阅我之前的文章 输入参数 名称 | 类型 | 必 ...
- python面试题之多线程好吗?列举一些让Python代码以并行方式运行的方法
答案 Python并不支持真正意义上的多线程.Python中提供了多线程包,但是如果你想通过多线程提高代码的速度,使用多线程包并不是个好主意.Python中有一个被称为Global Interpret ...
- 关于py中lxml模块的cssselect的小问题
今天在使用lxml进行解析页面的时候遇到了不能解析空格的问题,就是类似于: <div class="aa bb"></div> 使用cssselect('. ...
- 如何实现qq消息轰炸
1.新建一个文本文档复制以下代码 Set WshShell = WScript.CreateObject("Wscript.Shell")WshShell.AppActivate& ...