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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • background-image: url(http://img1.sycdn.imooc.com//54cf2365000140e600740095.jpg), url(http://img1.sycdn.imooc.com//54cf238a0001728d00740095.jpg), url(http://img1.sycdn.imooc.com//54cf23b60001fd9700740096.jpg); background-position: left top, 100px 0, 200px 0; background-repeat: no-repeat, no-repeat, no-repeat; 注意: 用逗号隔开每组 background 的缩写值; 如果有 size 值,需要紧跟 position 并且用 "/" 隔开; 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。 background-color 只能设置一个。
    查看全部
  • 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 background-size: auto | <长度值> | <百分比> | cover | contain 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
  • 用来将背景图片做适当的裁剪以适应实际需要 参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
    查看全部
  • 背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 background-origin : border-box | padding-box | content-box;
    查看全部
  • text-shadow 可设置文本阴影效果 text-shadow: X-Offset Y-Offset blur color; text-shadow: 2px 2px 0 red;
    查看全部
  • @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 @font-face { font-family: "MOOC Font"; src: url("http://www.imooc.com/Amaranth-BoldItalic.otf"); }
    查看全部
  • 设置文本超出部分显示省略号 text-overflow:ellipsis||clip;//文本超出部分如何处理:显示省略号||剪切掉 overflow:hidden; //溢出部分隐藏 white-space:nowrap; //强制文本在一行显示不换行
    查看全部
  • 线性渐变: linear-gradient( 渐变方向,过渡颜色 至少两个 可多个) 渐变方向: to top 从下向上 to right 从左向右 to bottom to left to top left to top rigiht
    查看全部
  • 设置颜色 rgba background-color:rgba(100,120,60,0.5);
    查看全部
  • 为边框应用背景图片 border:15px solid #ccc; border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 70 round
    查看全部
  • 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊; 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小; 2、X轴偏移量和Y轴偏移量值可以设置为负数
    查看全部
  • box-shadow是向盒子添加阴影。支持添加一个或者多个。多个可用逗号分割 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; box-shadow:10px 10px 6px 6px #0cf inset;
    查看全部
  • border-radius是向元素添加圆角边框。 border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
    查看全部
  • 不同浏览器对应不同的前缀 前缀 浏览器 -webkit chrome和Safari -moz Firefox -ms IE -o opera
    查看全部
    0 采集 收起 来源:什么是CSS3?

    2017-02-25

  • box-sizing: 盒子模型 语法:box-sizing: content-box | border-box | inherit
    查看全部
    0 采集 收起 来源:CSS3 盒子模型

    2017-02-23

举报

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

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