面试总结【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可以自定义吗?大家 ...
随机推荐
- (转)OpenFire源码学习之九:OF的缓存机制
转:http://blog.csdn.net/huwenfeng_2011/article/details/43415023 关于缓存,openfire存储到了本地JVM中.本人认为这样并不是很好.以 ...
- Django Shell 如何对数据库进行测试
Django 如何对数据库进行测试 Python manager.py shell Import django django.setup() from my_app.models import * 开 ...
- 杂项-.Net-HQL:HQL
ylbtech-杂项-.Net-HQL:HQL HQL是Hibernate Query Language的缩写,提供更加丰富灵活.更为强大的查询能力:HQL更接近SQL语句查询语法. 1.返回顶部 1 ...
- Vim用法AAAAA
.linux系统中如何进入退出vim编辑器,方法及区别 我们当然要保存并退出了,然后下一步了.这时,我们要按键盘左上角的"ESC",留意到了没有?左下角的插入状态不见了,如图. 然 ...
- JDK8新特性之函数式接口
什么是函数式接口 先来看看传统的创建线程是怎么写的 Thread t1 = new Thread(new Runnable() { @Override public void run() { Syst ...
- 牛客网多校训练第八场A All one Matrix
题目链接:https://ac.nowcoder.com/acm/contest/888/A 题意:求出有多少个不被包含的全1子矩阵 解题思路:首先对列做处理,维护每个位置向上1的个数,然后我们从最后 ...
- Mac OS X终端的常用操作命令(UNIX指令)
用了十多年windows,终于换了个高配Mac,俗话说 无论前端还是后端最终还是走向了linux,无论是换了多少台PC最终都会走向Mac.不学习命令行用什么Mac? 干就完了~ pwd 显示现在的文件 ...
- python--reflect
一.反射 python 中用字符串的方式操作对象的相关属性,python 中一切皆对象,都可以使用反射 用eval 有安全隐患,用 反射就很安全 1.反射对象中的属性和方法 class A: a_cl ...
- 2018-2-13-win10-uwp-音频
title author date CreateTime categories win10 uwp 音频 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23 ...
- zeromq protobuf例子
https://github.com/AifiHenryMa/zeromq_protocolbuffer_demo https://github.com/protocolbuffers/protobu ...