CSS3

作者: GarenWang | 来源:发表于2017-01-02 23:48 被阅读0次

问答

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](https://img.haomeiwen.com/i3361706/d7754dd56dd24b8a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![U@1IS6OA`LM{P{X)%]ZE4{W.png](https://img.haomeiwen.com/i3361706/9c7c45f222c6c3ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

代码题

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

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

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

相关文章

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • CSS3-目录

    1 CSS3 兼容性 2 CSS3 选择器 3 CSS3 新加属性 4 CSS3 过渡动画 5 CSS3 变型 6...

  • CSS3 背景

    知识点: CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...

  • css3渐变:线性和径向

    知识点: CSS3 渐变CSS3 线性渐变CSS3 径向渐变 CSS3 渐变 渐变(gradients)可以在两个...

  • CSS3设置圆角边框 圆角特效代码 CSS3的圆角border-

    CSS3设置圆角边框 css3圆角特效代码 CSS3 border-radius 属性 使用 CSS3 borde...

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes ...

  • css3 基础

    1. css3 起步 (图形2D旋转) 2. CSS3 模块 CSS3 被划分为模块。其中最重要的 CSS3 ...

  • CSS3:边框与圆角

    知识点: CSS3圆角CSS3盒阴影CSS3边界图片 一、CSS3圆角 border-radius属性 一个最多可...

  • css3圆角

    css3 圆角使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。CSS3 bord...

  • 1217

    资源:css3制作工具css3按钮生成css3制作特殊效果-web前端实验室 浏览器的型号和css3前缀 五种主流...

网友评论

      本文标题:CSS3

      本文链接:https://www.haomeiwen.com/subject/dqxgvttx.html