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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • wcly
    跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。 column-span: none | all
    查看全部
    0 采集 收起 来源：CSS3 跨列设置column-span

    2015-08-10

  • wcly
    列表边框column-rule column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。 语法规则： column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
    查看全部
    0 采集 收起 来源：CSS3 列表边框column-rule

    2018-03-22

  • wcly
    column-width 宽度 column-count 列数 column-gap主要用来设置列与列之间的间距
    查看全部
    0 采集 收起 来源：CSS3 列间距column-gap

    2015-08-10

  • wcly
    列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length>
    查看全部
    0 采集 收起 来源：CSS3 列间距column-gap

    2018-03-22

  • wcly
    多列布局——column-count column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则： column-count：auto | <integer>
    查看全部
    0 采集 收起 来源：CSS3 多列布局——column-count

    2018-03-22

  • wcly
    多列布局columns属性参数主要就两个属性参数：列宽和列数。 举例：要显示2栏显示，每栏宽度为200px，代码为： columns: 200px 2;
    查看全部
    0 采集 收起 来源：CSS3 多列布局——Columns

    2015-08-10

  • 兔_兔
    text-overflow 与 word-wrap text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。 text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果. word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。 word-wrap:normal|break-word normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可 .test_demo{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc; }
    查看全部
    0 采集 收起 来源：CSS3文字与字体 text-overflow 与 word-wrap

    2015-08-10

  • 代晓松
    box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2015-08-10

  • 代晓松
    border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2015-08-10

  • 兔_兔
    border-image:url(border.png) 70 70 70 70 repeat repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。 Round 参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸） Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2015-08-10

  • wcly
    设置动画的播放状态 animation-play-state属性主要用来控制元素动画的播放状态。 参数： 其主要有两个值：running和paused。 其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。 例如，页面加载时，动画不播放。代码如下： animation-play-state:paused;
    查看全部
    0 采集 收起 来源：CSS3中设置动画的播放状态

    2015-08-10

  • wcly
    设置动画播放方向 animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。 例如：通过animation-direction属性，将move动画播放动画方向设置为alternate，代码为： animation-direction:alternate; 注意：Chrome或Safari浏览器，需要加入-webkit-前缀！
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放方向

    2015-08-10

  • wcly
    提示：到目前为止支技animation动画的只有webkit内核的浏览器，所以我需要在上面的基础上加上-webkit前缀，据说Firefox5可以支持css3的 animation动画属性。
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放时间

    2015-08-10

  • wcly
    调用动画 animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。
    查看全部
    0 采集 收起 来源：CSS3中调用动画

    2015-08-10

  • wcly
    Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。
    查看全部
    0 采集 收起 来源：CSS3 Keyframes介绍

    2015-08-10

首页上一页821822823824825826827下一页尾页

举报

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

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

查看已购买的课程