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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 第三节 background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 background-size: auto | <长度值> | <百分比> | cover | contain auto:默认值,不改变背景图片的原始高度和宽度; <长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; <百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
  • 得到的效果等同。 建议使用:root方法。 另外在IE9以下还可以借助“:root”实现hack功能。-----------hack功能是什么功能?
    查看全部
  • a[href^="aa"]代表开头"aa"的元素 a[class$"aa"]代表尾部"aa"的元素 a[href*="aa"]代表任意部分"aa"的元素
    查看全部
  • 第二节 background-clip 背景 用来将背景图片做适当的裁剪以适应实际需要。 background-clip : border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。默认值为border-box。
    查看全部
  • 第一节 background-origin 设置元素背景图片的原始起始位置。如果背景不是no-repeat,这个属性无效,它会从边框开始显示。 background-origin : border-box(边框) | padding-box(内边距【默认值】) | content-box(内容区域);
    查看全部
  • 第三节 文本阴影text-shadow text-shadow可以用来设置文本的阴影效果。text-shadow: X-Offset Y-Offset blur color; X-Offset:水平偏移,正值阴影向右,负值向左偏移; Y-Offset:偏移距离,正值阴影向下,负值向上偏移; Blur:模糊程度,不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:阴影颜色,可使用rgba色-rgba(255,255,255,0.8)。
    查看全部
  • 第二节 嵌入字体@font-face @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 @font-face { font-family : "字体名称"; src : 字体文件在服务器上的相对或绝对路径; } p { font-size :12px; font-family : "字体名称"; /*必须项,设置@font-face中font-family同样的值*/ }
    查看全部
  • 第一节 text-overflow 与 word-wrap text-overflow:clip(剪切) / ellipsis(省略号) 单独使用无效,需搭配使用。代码如下: text-overflow:ellipsis; overflow:hidden; /*溢出内容为隐藏*/ white-space:nowrap; /*强制文本在一行内显示*/ word-wrap设置长单词或URL地址内部进行换行的文本行为,当前行超过指定容器的边界时是否断开转行。(不常用,用浏览器默认值即可) 语法: word-wrap:normal(表示控制连续文本换行) | break-word(表示内容将在边界内换行)
    查看全部
  • ::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。
    查看全部
  • “::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的 通过“::selection”选择器,将Web中选中的文本背景变成红色,文本变成绿色。
    查看全部
  • 火狐下没有效果,但自己写代码有效果,木渴望的程序有问题
    查看全部
  • 后者一样 可以省略?
    查看全部
  • 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至"某一边"紧贴容器边缘为止。
    查看全部
  • background-clip : border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
    查看全部
  • background-origin: content-box[,border-box][,padding-box]
    查看全部

举报

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

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