CSS3

问答

1.CSS3有哪些常见的新特性?

  • CSS选择器
    1.伪类选择器:E:nth-child(n),E:not(),E:empty(),E:checked,E:nth-of-type(n),E:nth-last-of-type(n),E:first-child,E:last-child
    2.伪元素选择器:E:first-letter,E:first-line,E::selection
    3.关系选择器:兄弟选择器E~F,相邻选择器E+F
  • 盒模型
    1.box-sizing:border-box
  • 边框
    1.border-radius(圆角,画圆、椭圆、半圆等)
    2.box-shodow(添加阴影)
    3.border-image(允许图片作为边框)
  • 背景
    1.background-image(背景图片可叠加)
    2.background-size(cover,contain)
    3.background-origin(指定了背景图像的位置区域,border-box,padding-box,content-box)
    4.background-clip(背景剪裁属性是从指定位置开始绘制.content-box,padding-box)
  • 渐变
    1.线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向,语法如下:
    background: linear-gradient(direction, color-stop1, color-stop2, ...);
    background: linear-gradient(angle, color-stop1, color-stop2);
    repeating-linear-gradient() 函数用于重复线性渐变
    2.径向渐变(Radial Gradients)- 由它们的中心定义
    background: radial-gradient(center, shape size, start-color, ..., last-color);
    repeating-radial-gradient() 函数用于重复径向渐变
  • 文本效果
    1.text-shadow(适用于文本阴影)
    2.text-overflow(指定应向用户如何显示溢出内容)
    3.word-wrap(自动换行属性允许您强制文本换行)
    4.word-break(规定非中日韩文本的换行规则)
  • 字体
    1.@font-face引入自定义字体
  • 2D转换
    1.translate(),根据左(X轴)和顶部(Y轴)位置给定的参数平移
    2.rotate(),一个给定度数顺时针旋转的元素
    3.scale() 取决于宽度(X轴)和高度(Y轴)的参数进行缩放
    4.skew() 取决于宽度(X轴)和高度(Y轴)的参数进行发生倾斜
    5.matrix(),有六个参数,包含旋转,缩放,移动(平移)和倾斜功能
  • 3D转换
    1.rotateX(),rotateY(),rotateZ(),围绕其在一个给定度数X轴/Y轴/Z轴旋转的元素
    2.translateX(),ranslateY(),ranslateZ(),定义 3D的沿X轴,Y轴,Z轴平移
    3.scaleX() scaleY() scaleZ(), 定义 3D 沿X轴,Y轴,Z轴缩放转换
    4.perspective,定义 3D 转换元素的透视视图必须加上
  • 过渡
    过渡是元素从一种样式逐渐改变为另一种的效果
    1.指定要添加效果的CSS属性
    2.指定效果的持续时间
  • 动画
    @keyframes规则是创建动画。
    1.规定动画的名称
    2.规定动画的时长
  • 多列布局

![]L848%8FIK$I)%Q%]4J89.png](http://upload-images.jianshu.io/upload_images/3361706-d7754dd56dd24b8a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![U@1IS6OA`LM{P{X)%]ZE4{W.png](http://upload-images.jianshu.io/upload_images/3361706-9c7c45f222c6c3ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  • 多媒体查询
    @media针对不同媒体类型可以定制不同的样式规则。

代码题

  • 写出如下 CSS3效果的简单事例
    1.圆角, 圆形
    2.div 阴影
    3.2D 转换:放大、缩小、偏移、旋转
    4.3D 转换:移动、旋转
    5.过渡效果
    6.动画
    7.背景色渐变
    代码

  • 实现如下全屏图加过渡色的效果
    代码

  • 写出如下 loading 动画效果
    代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,497评论 0 7
  • CSS3简介 CSS3的现状 浏览器支持程度差,需要添加 私有前缀 ; 移动端支持优于PC端; 不断改进中; 应用...
    magic_pill阅读 725评论 0 1
  • 选择器 CSS3中新添加了很多选择器,解决了很多之前需要用javascript才能解决的布局问题。· elemen...
    lovelydong阅读 452评论 0 2
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    aliensq阅读 1,961评论 0 2
  • 行测碰到不会的题,怎样才能猜到正确答案? 行测那么多考点,短时间内全部掌握实在太难了,如果在考试中遇到不会的题又不...
    博汇小子阅读 757评论 0 0