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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 旋上的舞
    颜色之RGBA RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法： color：rgba(R,G,B,A) 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。
    查看全部
    0 采集 收起 来源：CSS3颜色 颜色之RGBA

    2015-07-08

  • 旋上的舞
    为边框应用图片 border-image 顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。例如： background:url(xx.jpg) 10px 20px no-repeat; repeat的意思就是重复 Round 参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）； Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2015-07-08

  • 大白大白
    :nth-child(n),可以是表达式(2n+1、-n+5)和关键词(odd、even)，参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2015-07-08

  • 旋上的舞
    阴影 box-shadow（二） 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（二）

    2015-07-08

  • 旋上的舞
    阴影 box-shadow（一） box-shadow是向盒子添加阴影。支持添加一个或者多个。 很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 第一个参数为x轴属性，必输，如果是正数则按照元素的右边框边界向外，如果是负数则按照元素左边框向作； 第二个参数，必输，如果是正数则按照元素的下边界向下，如果是负数则按照元素上边框向上算； 第三个参数为阴影模糊的半径，不可为负数，可以调整阴影模糊的程度，如果没有第四个参数，则这个参数可省略，如果有则不可以被省略； 第四个参数，阴影的扩展半径，扩展是按照阴影中心向四周辐射拓展，如果为1px则四个方向分别阴影部分加1px，那么阴影总大小，宽度加2px，高度加2px，此项也不可为负值，可以省略； 第五个参数为阴影颜色，支持关键字如果不写默认为黑色； 第六个参数为投影方式，如果不写则为外阴影，如果为inset则为内阴影；（不知道为什么没有相对应的outset外部阴影方式） 注意：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-08

  • 旋上的舞
    圆角效果 border-radius border-radius是向元素添加圆角边框。 使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 不要以为border-radius的值只能用px单位，你还可以用百分比或者em， 实心上半圆： 方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2015-07-08

  • 旋上的舞
    选择器 以前我们通常用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标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。 媒体查询 针对不同屏幕分辨率，应用不同的样式。
    查看全部
    0 采集 收起 来源：CSS3能做什么？

    2015-07-08

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

    2015-07-08

  • StudyAdapter
    对伪元素概念不了解
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2015-07-08

  • StudyAdapter
    如果有 size 值，需要紧跟 position 并且用 "/" 隔开；------没看懂，但这代码也可以。
    查看全部
    0 采集 收起 来源：CSS3背景 multiple backgrounds

    2018-03-22

  • Thinker_Ac
    transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。 有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。 例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡延迟时间 transition-delay

    2015-07-07

  • Thinker_Ac
    transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数： ease:由快到慢，逐渐变慢 linear:恒速 ease-in:速度越来越快 ease-out:速度越来越慢 ease-in-out:先加速再减速
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡函数 transition-timing-function

    2015-07-07

  • Thinker_Ac
    transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡所需时间 transition-duration

    2015-07-07

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

    2015-07-07

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

    2015-07-07

首页上一页883884885886887888889下一页尾页

举报

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

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

查看已购买的课程