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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 思迥异做不同
    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-04-01

  • 思迥异做不同
    /* 圆角边框 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ border-radius: 5px 4px 3px 2px;
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2015-04-13

  • 虹之翼
    结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 示例演示 通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。 HTML代码： <ol> <li><a href="##">Link1</a></li> <li><a href="##">Link2</a></li> <li><a href="##">link3</a></li> </ol> CSS代码： ol > li{ font-size:20px; font-weight: bold; margin-bottom: 10px; } ol a { font-size: 16px; font-weight: normal; } ol > li:first-child{ color: red; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—first-child

    2018-03-22

  • HELLO畅呼呼
    text-overflow word-wrap
    查看全部
    0 采集 收起 来源：CSS3文字与字体 text-overflow 与 word-wrap

    2015-04-01

  • 棒棒糖_Magic
    transition transition-duration transition-timing-function transition-delay
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-04-01

  • 海飞丝的芳香
    哆啦A梦
    查看全部
    0 采集 收起 来源：CSS3能做什么？

    2015-04-01

  • yangmingyuan
    @font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。 @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }
    查看全部
    0 采集 收起 来源：CSS3文字与字体 嵌入字体@font-face

    2015-04-01

  • 上啊比卡丘
    transition-property:指定过渡或动态模拟的CSS属性 没有写transition-property的话，表示默认ALL 就是全部发生改变的都过渡
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-03-31

  • qq_ZST_0
    CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响， 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 element空间宽度＝内容宽度＋内距＋边框＋外距 内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） element宽度＝内容宽度＋内距＋边框（width为内容宽度）
    查看全部
    0 采集 收起 来源：CSS3 盒子模型

    2015-03-31

  • 洛雪
    动画--过渡属性 transition-property 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式； 第二，声明过渡元素最终状态样式，比如悬浮状态； 第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 先来看transition-property属性 transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有： 特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。 用一个简单的例子来说明这个问题： 假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2015-03-31

  • 洛雪
    变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 transform-origin取值和元素设置背景中的background-position取值类似，
    查看全部
    0 采集 收起 来源：CSS3中的变形--原点 transform-origin

    2015-03-31

  • 洛雪
    变形--矩阵 matrix() matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2015-03-31

  • 洛雪
    制作3D旋转视频展示区
    查看全部
    0 采集 收起 来源：制作3D旋转视频展示区

    2015-03-31

  • xiaomogu
    制作导航菜单综合练习题
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2015-03-31

  • 洛雪
    CSS生成内容 在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。 none——不生成任何内容 attr——插入标签属性值 url——使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） string——插入字符串 实例展示： 在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示： .clearfix:before, .clearfix:after { content:””; display:table; } .clearfix:after { clear:both; overflow:hidden; } 上面这个示例是最常见的，也是最简单的，我们再来看一个插入元素属性值的方法。 假设我们有一个元素： <a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a> 可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后： a:after { content:attr(title); color:#f00; }
    查看全部
    0 采集 收起 来源：CSS生成内容

    2018-03-22

首页上一页1016101710181019102010211022下一页尾页

举报

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

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

查看已购买的课程