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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 太强大
    查看全部
    0 采集 收起 来源:CSS3能做什么?

    2015-10-29

  • animation-iteration-count:infinite; //无限循环
    查看全部
  • background-size设置背景图片的大小,语法: background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
  • background-clip 用来将背景图片做适当的裁剪以适应实际需要。 语法: background-clip : border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box
    查看全部
  • background-origin 设置元素背景图片的原始起始位置。 background-origin背景图片原点语法: background-origin: border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 注意:如果背景不是no-repeat,这个属性无效,它会默认从边框开始显示。
    查看全部
  • 自由缩放属性resize 为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止,可以使用overflow属性的任何容器元素。 在此之前,Web设计师为了要实现这样具有拖动效果的UI,使用大量的脚本代码才能实现,这样费时费力,效率极低。 resize属性主要是用来改变元素尺寸大小的,其主要目的是增强用户体验。但使用方法却是极其的简单,先从其语法入手。 resize: none | both | horizontal | vertical | inherit 取值说明: 属性值 取值说明 none 用户不能拖动元素修改尺寸大小。 both 用户可以修改元素的宽度和高度 horizontal 允许用户可以拖动水平修改。 vertical 允许用户可以拖动垂直修改。 inherit 继承父元素的resize属性值。
    查看全部
  • 拖动改变元素大小 #textarea_horizontal{ resize:horizontal; } #textarea_none{ resize:none; } #textarea_vertical{ resize:vertical; } #textarea_both{ resize:both; }
    查看全部
  • ::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。.effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } 上面代码作用在class名叫.effect上的div的前(before)后(after)都添加一个空元素,然后为这两个空元素添加阴影特效。
    查看全部
  • “:read-write”选择器刚好与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。 使用“:read-write”选择器来设置不是只读控件的文本框样式。
    查看全部
  • :checked选择器 style css 再熟悉
    查看全部
  • 属性read-only:="read-only"的应用一下样式。 input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; }
    查看全部
  • ::selection{ background: orange; color: white;} 鼠标选中时的样式
    查看全部
  • 属性disabled="disabled" div{ margin: 20px; } input[type="text"]:enabled { background: #ccc; border: 2px solid red; } 属性不为“disabled”应用此样式
    查看全部
  • .wrapper > div:only-of-type { background: orange; } 同理,wrapper中只有一个div的此div才应用此样式
    查看全部
  • .post p:only-child { background: orange; } 改变post中只有一个P元素的应用此样式
    查看全部

举报

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

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