为了账号安全，请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
获取体验码
十天精通CSS3_学习笔记_慕课网
为了账号安全，请及时绑定邮箱和手机立即绑定
精品课程 十天精通CSS3

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • Qyizos
    CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 transform-origin //改变原点的位置 -webkit-transform-origin: top right; -moz-transform-origin: top right; transform-origin: top right;
    查看全部
    0 采集 收起 来源：CSS3中的变形--原点 transform-origin

    2017-02-27

  • Qyizos
    translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动） 水平垂直居中 transform:translate(-50%,-50%);
    查看全部
    0 采集 收起 来源：CSS3中的变形--位移 translate()

    2017-02-27

  • Qyizos
    缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）; Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）
    查看全部
    0 采集 收起 来源：CSS3中的变形--缩放 scale()

    2017-02-27

  • Qyizos
    Skew()具有三种情况： 1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）;
    查看全部
    0 采集 收起 来源：CSS3中的变形--扭曲 skew()

    2017-02-27

  • Qyizos
    旋转rotate() transform:rotate(45deg);//顺时针 旋转45度
    查看全部
    0 采集 收起 来源：CSS3变形--旋转 rotate()

    2017-02-27

  • 慕码人5836015
    only-of-type是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用only-of-type选择器就可以选中这个元素中的唯一一个类型子元素
    查看全部
    0 采集 收起 来源：CSS3 only-of-type选择器

    2017-02-26

  • colorful_star
    颜色 rgba（rgb=0~255，或者，rgb=0%-100%，a=0-1）rgb红绿蓝，a透明度 渐变 线性渐变linear-gradient（渐变的方向，渐变的起点，渐变的终点） to top 从下往上，to bottom 从上往下，to left 从右往左，to right 从左往右 to top left 从右下到左上，to top right 从左下到右上
    查看全部
    0 采集 收起 来源：CSS3颜色 渐变色彩 

    2017-02-26

  • colorful_star
    边框 border-radius：上，右，下，左 box-shadow：水平阴影位置，垂直阴影位置，模糊距离，阴影尺寸，阴影颜色，投影方式 border-image：图片路径，切割图片的宽度（上右下左），图片延伸方式（round-平铺，repeat重复，stretch拉伸）
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2017-02-26

  • which
    /*使用伪元素制作导航列表项分隔线*/ .nav li:not(:first-child):before, .nav li:not(:last-child):after{ content:''; display:block; width:1px; height:22px; position: absolute; top:14px; } .nav li:before{ background-image:linear-gradient(rgba(0,0,0,.0),rgba(0,0,0,.1),rgba(0,0,0,.0)); left:0; } .nav li:after{ background-image:linear-gradient(rgba(255,255,255,.0),rgba(255,255,255,.1),rgba(255,255,255,.0)); right:0; }
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2017-02-25

  • which
    /*使用伪元素制作导航列表项分隔线*/ .nav li:not(:first-child):before, .nav li:not(:last-child):after{ content:''; display:block; width:1px; height:22px; position: absolute; top:14px; } .nav li:before{ background-image:linear-gradient(rgba(0,0,0,.0),rgba(0,0,0,.1),rgba(0,0,0,.0)); left:0; } .nav li:after{ background-image:linear-gradient(rgba(255,255,255,.0),rgba(255,255,255,.1),rgba(255,255,255,.0)); right:0; }
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2017-02-25

  • Qyizos
    :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 div:empty{ width:300px; height:100; background:
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—empty

    2017-02-25

  • Qyizos
    not 选择器 :not选择器称为否定选择器 div:not([id="page"]){border:1px solid #000}
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—not

    2018-03-22

  • Qyizos
    伪类选择器 :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—root

    2018-03-22

  • juymy
    用伪元素制作导航列表分割线
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2017-02-25

  • Qyizos
    css3 选择器 属性选择器 ^ 是选择开头位置包含的；$是选择结尾位置包含的；*是选择任意位置包含的 a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }
    查看全部
    0 采集 收起 来源：CSS3选择器 属性选择器

    2017-02-25

首页上一页302303304305306307308下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么？
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程