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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊; 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小; 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
    查看全部
  • 注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。
    查看全部
  • border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
    查看全部
  • /*使用伪元素制作导航列表项分隔线*/ .nav li{ background:linear-gradient(red,grey,red) no-repeat right/1px 20px; } /*删除第一项和最后一项导航分隔线*/ .nav li:last-child { background:linear-gradient(red,grey,red) no-repeat right/0 0; }
    查看全部
  • 没完成能力不够,继续学习下一章节
    查看全部
  • text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
    查看全部
  • 线性渐变 background-image: linear-gradient(to top,**,**,**);
    查看全部
  • Media Queries——媒体类型(一) 随着科学技术不断的向前发展,网页的浏览终端越来越多样化,用户可以通过:宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样,但至少要让你的Web页面能适配用户的终端,让他更好的呈现在你的用户面前。在本节中,将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺寸),从而让你的页面让用户有一个更好的体验。 Media Queries Media Queries是CSS3新增加的一个模块功能,其最大的特色就是通过CSS3来查询媒体,然后调用对应的样式。其实这个功能在CSS2.1中就有出现过,只不过那个时候此功能并不强大,我们最常见的就是给打印设备添加打印样式。随着时代的变化,这个模块功能越来越强大。 在彻底的了解Media Queries我们需要了解其中的两个重要部分,第一个是媒体类型,第二个是媒体特性。下面的内容我们简单的来了解这两个部分: 一、媒体类型 媒体类型(Media Type)在CSS2中是一个常见的属性,也是一个非常有用的属性,可以通过媒体类型对不同的设备指定不同的样式。 在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式),其实媒体类型远不止这三种,W3C总共列出了10种媒体类型。如下表所示: 值 设备类型 All 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打印机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种投影设备 Screen 电脑显示器 Speech 语音或音频合成器 Tv 电视机类型设备 Tty 使用固定密度字母栅格的媒介,比如电传打字机和终端 其中Screen、All和Print为最常见的三种媒体类型。
    查看全部
  • text-overflow:clipellipsis;
    查看全部
  • 360浏览器不支持 3D 啊?
    查看全部
  • 伪类 :before :after 伪元素 ::before ::after 这俩什么区别?
    查看全部
    0 采集 收起 来源:CSS生成内容

    2016-08-04

  • outline 外轮廓。 和border有啥区别呢
    查看全部
    0 采集 收起 来源:CSS3外轮廓属性

    2016-08-04

  • div等如果要使用 resize方法,需要加上 overflow:auto; 才能缩放
    查看全部
  • 设置动画时间外属性 animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none、forwards、backwords和both。其四个属性值对应效果如下: 属性值 效果 none 默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果 在默认情况之下,动画不会影响它的关键帧之外的属性,使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始,或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。 例如:让动画停在最一帧处。代码如下: animation-fill-mode:forwards;
    查看全部
  • 有时我们想改变两个或者多个css属性的transition效果时,只要把几个transition的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点:第一个时间的值为 transition-duration,第二个为transition-delay。 例如:a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}
    查看全部

举报

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

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