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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • transform: rotate(45deg) 通过指定的角度使元素相对原点进行旋转,正值:顺时针旋转;负值:逆时针旋转。例:<br> -webkit-transform: rotate(45dge);<br> -moz-transform: rotate(45dge); transform: rotate(45dage)
    查看全部
  • background-clip 用来将背景图片做适当的裁剪以适应实际需要。 语法: background-clip : border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
    查看全部
  • ::before和::after给元素前面或后面插入内容,常和"content"配合使用,最多的是用来清浮动。<br> .clearfix::before, .clearfix::after content: "."; display:block; height: 0 ; visibility: hidden; } .clearfix:after { clear:both; } .clearfix { zoom: 1; }
    查看全部
  • background-origin 设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 如果背景不是no-repeat,这个属性无效,会从边框开始显示
    查看全部
  • 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,这个属性无效,它会从边框开始显示。
    查看全部
  • text-shadow可以用来设置文本的阴影效果。 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移; Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:是指阴影的颜色,其可以使用rgba色。 比如,我们可以用下面代码实现设置阴影效果。 text-shadow: 0 1px 1px #fff
    查看全部
  • 嵌入字体@font-face 能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里面没有安装的字体 语法: @font-face{ font-family:"name";//字体名称 src:url("http://...");//字体在服务器上的相对或者绝对路径 } p{ font-family:"name";//必须和font-face中font-family的值一样 }
    查看全部
  • 语法为: background-img:linear-gradient(to left,red,orange); 第一个参数指定渐变方向,可以用角度的关键词或者英文来表示: 角度 用英文 作用 0deg to top 从下向上 90deg to right 从左向右 180deg to bottom 从上向下 270deg to left 从右向左 to top left 右下角到左上角 to top right 左下角到右上角 第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值
    查看全部
  • CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
    查看全部
  • 在自适应布局当中,在元素基础上添加内距padding,按照标准盒模型解析,往往会将布局撑破,但使用box-sizing的border-box值,可以让你轻松完成。
    查看全部
    1 采集 收起 来源:CSS3 盒子模型

    2016-05-31

  • 多图片背景基本语法: background: [background-color]/[background-image] [background-position] [/background-size] [background-repeat].... 背景图片的设置方式和单背景图片相差无几,但有几个需要注意的点: 1.用逗号隔开每一组background 2.如果有size值,必须紧跟position值并用/隔开 3.如果其他属性只有一个,则所有背景图片都会应用这个属性值 4.background-color只能设置一个 另外,定义的方式还有第二种,就是分类型定义,如: background-repeat: repeat1, repeat2, repeat3...; background-position: position1, position2, position3...; 以此类推
    查看全部
  • 基本语法:background-size: auto/ <长度值>/ <百分比>/ cover/ contain 设置背景图片的大小,方式有很多 auto表示默认,不改变; <长度值>以像素为单位设置背景图片宽高; <百分比>以容器的百分比设置背景图片宽高; cover覆盖,填充整个容器; contain拉伸,直至某一边紧贴容器边缘
    查看全部
  • 基本语法:background-clip: border-box/ padding-box/ content-box/ no-clip 裁剪背景图片 border-box表示从边框开始裁剪; padding-box表示从内填充开始裁剪; content-box表示从内容开始裁剪; no-clip表示不裁剪
    查看全部

举报

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

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