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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 拖鞋酱
    “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-last-child(n)

    2015-07-22

  • 拖鞋酱
    “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2015-07-22

  • 拖鞋酱
    “:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—last-child

    2015-07-22

  • 拖鞋酱
    “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—first-child

    2015-07-22

  • julygzz
    扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
    查看全部
    0 采集 收起 来源：CSS3中的变形--扭曲 skew()

    2015-07-22

  • 慕姐6675690
    http://www.w3cplus.com/content/css3-border-image border-image-slice是用来分解引入进来的背景图片，这个参数相对来说比较复杂和特别，主要表现在以下几点： 1、其取值支持:<number> | <percentage>其中number是没有单位的，专指像素px，因为其默认的单位就是像素px，所以在使用number时不需要加上单位，如果加上了单位反而是错误的写法。另外我们除了直接用nuember来设置外，我们还可以使用百分比值来表示，百分比的值是相对于边框背景图片而言的，例如边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%，那么它们实际对应的效果就是剪切了图片的60px 90px 36px 60px的四边大小，如图所示： 正如上图所示:border-image-slice中的number或者percentage我们都可取1~4个值，这个类似于我们border-width的取值方式，也是遵从top,right,bottom,left的规则，具体的使用规则我想大家都非常清楚，如果不清楚的朋友可以参考CSS2中的border-width或者padding,margin等属性的使用方法。 fill：从字面上说是就是填充，如果使用这个关键字时，图片边界的中间部分将保留下来。默认情况下是为空的。 2、剪切的特性(slice)，在border-image中slice是一个关键部分，也是让人难以理解的部分。如果你用过CSS3中的clip属性，那么在理解border-image-slice来说相对会轻松一些。border-image-slice虽然表意上说不是剪切，但在我们实际应用中他就是一种纯粹的剪切，他把我们通过border-image-source取到的图片切成了九份，在像background-image一样重新布置。前面我们说了他有1～4个参数，类似于border-width的方位规则，在把剪切到的图片重新分布给他们。我们来看一个W3C官网的一个实例，首先来看其剪切示意图
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2018-03-22

  • TCircley
    自由缩放属性resize 为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。 在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。 resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。 resize: none | both | horizontal | vertical | inherit 取值说明： 属性值 取值说明 none 用户不能拖动元素修改尺寸大小。 both 用户可以拖动元素，同时修改元素的宽度和高度 horizontal 用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。 vertical 用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。 inherit 继承父元素的resize属性值。 例如：通过resize属性，让文本域可以沿水平方向拖大。代码为： textarea { -webkit-resize: horizontal; -moz-resize: horizontal; -o-resize: horizontal; -ms-resize: horizontal; resize: horizontal; }
    查看全部
    0 采集 收起 来源：自由缩放属性resize

    2015-07-22

  • 拖鞋酱
    :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—empty

    2015-07-22

  • 前端小小白
    为什么background-image 就不行呢？
    查看全部
    0 采集 收起 来源：CSS3背景 background-origin

    2015-07-21

  • Eva_echo
    阴影 box-shadow（一） box-shadow是向盒子添加阴影。支持添加一个或者多个。 很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍： 注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。 为元素设置外阴影： 示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333; } 效果： 为元素设置内阴影： 示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333 inset; } 效果： 添加多个阴影： 以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如： .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2015-07-21

  • Eva_echo
    圆角效果 border-radius  border-radius是向元素添加圆角边框。 使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */  border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */  不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。 实心上半圆： 方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。 div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ } 实心圆： 方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码： div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2015-07-21

  • Eva_echo
    圆角效果 以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。 块阴影与文字阴影 可以对任意DIV和文字增加投影效果。 色彩 CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA。 渐变效果 以前只能用Photoshop做出的图片渐变效果，现在可以用CCS写出来了。IE中的滤镜也可以实现。 多背景图 一个元素上添加多层背景图片。 变形处理 你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。 多栏布局 可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。 媒体查询 针对不同屏幕分辨率，应用不同的样式。
    查看全部
    0 采集 收起 来源：CSS3能做什么？

    2015-07-21

  • Eva_echo
    选择器 以前我们通常用class、 ID 或 tagname 来选择HTML元素，CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。
    查看全部
    0 采集 收起 来源：CSS3能做什么？

    2015-07-21

  • Eva_echo
    前缀：浏览器---- -webkit|chrome和safari -moz|firefox -ms|IE -o|opera
    查看全部
    0 采集 收起 来源：什么是CSS3？

    2015-07-21

  • 樱桃小丸子_0002
    结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 示例显示： 比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。 HTML代码： <p>我是一个段落</p> <p> </p> <p></p>​ CSS代码： p{ background: orange; min-height: 30px; } p:empty { display: none; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—empty

    2018-03-22

首页上一页855856857858859860861下一页尾页

举报

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

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

查看已购买的课程