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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
    查看全部
  • text-overflow:ellipsis;
    查看全部
  • http://www.w3cschool.cc/css3/css3-gradients.html
    查看全部
  • 不知道宽高的元素使用transform的translate属性实现居中
    查看全部
  • multiple backgrounds 多重背景 语法缩写如下: background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 可以把上面的缩写拆解成以下形式: background-image:url1,url2,...,urlN; background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color; 注意: 用逗号隔开每组 background 的缩写值; 如果有 size 值,需要紧跟 position 并且用 "/" 隔开; 如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。 background-color 只能设置一个。
    查看全部
  • CSS3能做什么? CSS3给我们带来了什么好处呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。 CSS3简化了前端开发工作人员的设计过程,加快页面载入速度。 CSS3都有哪些强大功能呢?各位小伙伴们先来一睹为快吧! 选择器 以前我们通常用class、 ID 或 tagname 来选择HTML元素,CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。 圆角效果 以前做圆角通常使用背景图片,或繁琐的元素拼凑,现在很简单了 border-radius 帮你轻松搞定。 块阴影与文字阴影 可以对任意DIV和文字增加投影效果。 色彩 CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL , CMYK ,HSLA and RGBA。 渐变效果 以前只能用Photoshop做出的图片渐变效果,现在可以用CCS写出来了。IE中的滤镜也可以实现。 个性化字体 网页上的字体太单一?使用@Font-Face 轻松实现定制字体。 多背景图 一个元素上添加多层背景图片。 边框背景图 边框应用背景图片。 变形处理 你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。 多栏布局 可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏,让文本实现一个仿报纸的多栏结构。 媒体查询 针对不同屏幕分辨率,应用不同的样式。 等等 …… 很神奇吧!CSS3使代码更简洁、更高效。可以极大的提高工作效率,打造更高级的用户体验。使web应用的界面设计进入一个新的台阶。
    查看全部
    0 采集 收起 来源:CSS3能做什么?

    2015-04-23

  • http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image%E8%AF%A6%E8%A7%A3%E3%80%81%E5%BA%94%E7%94%A8%E5%8F%8Ajquery%E6%8F%92%E4%BB%B6/
    查看全部
  • 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。 在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera
    查看全部
    0 采集 收起 来源:什么是CSS3?

    2015-04-23

  • 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 : border-box / padding-box / content-box; 参数分别表示背景图片是从 边框 /内边距(默认值)/ 内容区域开始显示。 注意:如果背景不是no-repeat,这个属性无效,它会从边框开始显示!!
    查看全部
  • XY轴偏移量按直角坐标系 - X轴以右为正,Y轴以下为正
    查看全部
  • 阴影模糊半径 - 正值,为0时表示不具有模糊效果,值越大阴影的边缘就越模糊。 阴影扩展半径 - 正负值,正表示整个阴影都延展扩大,负值为缩小。 XY轴偏移量按直角坐标系。
    查看全部
  • border-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; ************ X轴偏移量 - 水平阴影的位置,允许负值 Y轴偏移量 - 垂直阴影的位置,允许负值 阴影模糊半径 - 模糊距离 阴影扩展半径 - 阴影的尺寸 阴影颜色 - 默认为黑色 投影方式 - inset为内部阴影,省略则为外阴影。 注意: inset 可以写在参数的第一个或最后一个,其他位置是无效的。 ******************* 多个投影只需用【,】逗号隔开即可。
    查看全部
  • 实心上半圆: height:50px; width:100px; background-color:#9da; border-radius:50px 50px 0 0; --------------------------------- 实心圆: height:100px; width:100px; background-color:#oda; border-radius:50px;
    查看全部

举报

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

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