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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • HelloYangfan
    为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。 columns：<column-width>(列宽) || <column-count>（列数） <column-width> 主要用来定义多列中每列的宽度 <column-count> 主要用来定义多列中的列数
    查看全部
    0 采集 收起 来源：CSS3 多列布局——Columns

    2018-03-22

  • HelloYangfan
    column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现。 column-span: none | all none 此值为column-span的默认值，表示不跨越任何列。 all 这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。
    查看全部
    0 采集 收起 来源：CSS3 跨列设置column-span

    2015-03-25

  • HelloYangfan
    column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。 column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。 column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> column-rule-width 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。 column-rule-style 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 column-rule-color 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)
    查看全部
    0 采集 收起 来源：CSS3 列表边框column-rule

    2018-03-22

  • HelloYangfan
    column-gap主要用来设置列与列之间的间距。 column-gap: normal || <length> normal 默值为1em（如果你的字号是px，其默认值为你的font-size值） <length> 设置列与列之间的距离，其可以使用px,em单位的任何整数值，不能是负值。
    查看全部
    0 采集 收起 来源：CSS3 列间距column-gap

    2018-03-22

  • HelloYangfan
    column-count属性主要用来给元素指定想要的列数和允许的最大列数。 column-count：auto | <integer> auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 <integer> 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。
    查看全部
    0 采集 收起 来源：CSS3 多列布局——column-count

    2018-03-22

  • HelloYangfan
    column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。 column-width: auto | <length> auto 值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定 <length>使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不能为负值。
    查看全部
    0 采集 收起 来源：CSS3 多列布局——column-width

    2018-03-22

  • Carson_成
    inset 可以写在参数的第一个或最后一个，其它位置是无效的。
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2015-03-25

  • 凤仪
    CSS生成内容 在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3时代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。 content配合CSS的伪类或者伪元素，一般可以做以下四件事情： 1.none 不生成任何内容 2.attr 插入标签属性值 3.url 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） 4.string 插入字符串 实例展示： 在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示： .clearfix:before, .clearfix:after { content:””; display:table; } .clearfix:after { clear:both; overflow:hidden; } 再看一个插入元素属性值的方法。 假设我们有一个元素： <a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a> 可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后： a:after { content:attr(title); color:#f00; } //这个例子是说：给元素的相应属性定义了内容，则使用attr（属性）才会有显示内容
    查看全部
    0 采集 收起 来源：CSS生成内容

    2018-03-22

  • Lemon520
    动画--过渡延迟时间 transition-delay transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。 有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。 例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡延迟时间 transition-delay

    2015-03-25

  • Lemon520
    transition 过渡参数： trasition-property:检索或设置对象中的参与过渡的属性（all,none,指定要进行过渡的CSS属性） transition-duration:设置对象过渡的持续时间 transition-timing-function:检索或设置对象中过渡的动画类型: (linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内) transition-delay:检索或设置对象延迟过渡的时间
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2018-03-22

  • Lemon520
    http://blog.csdn.net/henren555/article/details/9699449
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2015-03-25

  • 乂_2015
    1.创建一个flex容器 任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit， .flexcontainer{ display: -webkit-flex; display: flex; } 2.Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。 3.Flex项目列显示 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 4.Flex项目移动到顶部 如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。 .flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }
    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（一）

    2015-03-25

  • Lemon520
    变形--位移 translate() translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动） 实例演示：通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。 -webkit-transform: translate(50px,100px); -moz-transform:translate(50px,100px); transform: translate(50px,100px); 注意： 1.translate类似于relative，都是相对于自身原来的位置进行平移 2.本节代码快照的例子--给不知道宽高的div实现水平和垂直居中挺有意思的 position:absolute; top:50%; left:50%;//这3行实现div的左上角位于页面水平垂直居中位置 --------------- -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);//这3行translate实现div在原来的位置向左向上平移自身宽高的50%
    查看全部
    0 采集 收起 来源：CSS3中的变形--位移 translate()

    2015-03-25

  • Lemon520
    缩放 scale()函数 让元素根据中心原点对对象进行缩放。 缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放） 注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。
    查看全部
    0 采集 收起 来源：CSS3中的变形--缩放 scale()

    2015-03-25

  • Lemon520
    变形--扭曲 skew() rotate(**) 是将元素的内容旋转到**度，不会改变图形的形状 skew（**） 是将图形扭曲**度，分X Y轴 扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。
    查看全部
    0 采集 收起 来源：CSS3中的变形--扭曲 skew()

    2015-03-25

首页上一页1028102910301031103210331034下一页尾页

举报

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

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

查看已购买的课程