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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • XiaoShuShu1993
    圆角效果 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-03-22

  • XiaoShuShu1993
    CSS3能做什么？ CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。 CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。 CSS3都有哪些强大功能呢？各位小伙伴们先来一睹为快吧！ 选择器 以前我们通常用class、 ID 或 tagname 来选择HTML元素，CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。
    查看全部
    0 采集 收起 来源：CSS3能做什么？

    2015-03-22

  • 墨涤
    p{ font-size:42px; text-align:center; font-weight:bold; background:rgba(255,255,255,0.5);; } 或者： p{ font-size:42px; text-align:center; font-weight:bold; background:rgba(255,255,255,1);; } 区别就明显大了！
    查看全部
    0 采集 收起 来源：CSS3颜色 颜色之RGBA

    2015-03-22

  • 墨涤
    border:15px solid #ccc; border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 70 round; 这两个对比后 就可以加深理解记忆了，边框线的大小也对图片边框线有影响？可以这样理解吗？
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2015-03-22

  • 墨涤
    http://www.wqcms.com/html/c31/2012-06/3381.html 引入： border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅Firefox3.5，chrome浏览器，Safari3+支持border-image。所以，就本文而言，IE浏览器可以回家休息了，Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以，本文提供的一些demo页面，要在Firefox3.5+，chro...
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2015-03-22

  • 凤仪
    渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。 渐变颜色是在background-image下写的 background-image:linear-gradient(渐变方向,颜色起始值,颜色终点值); 注意： (1)渐变类型：linear-gradient和radial-gradient (2)渐变方向 to left：从右到左 to right：从左到右 to top：从下到上 to bottom：从上到下 to top left：从右下到左上 to top right：从左下到右上 (3)渐变颜色：可多个，各颜色之间用逗号","隔开
    查看全部
    0 采集 收起 来源：CSS3颜色 渐变色彩 

    2018-03-22

  • 凤仪
    颜色之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之间，不可为负值。 代码示例： background-color:rgba(100,120,60,0.5); 说明：透明度为0或0.5(0点几)的0是可以省略的
    查看全部
    0 采集 收起 来源：CSS3颜色 颜色之RGBA

    2015-03-22

  • 凤仪
    为边框应用图片 border-image border-image:url(图片路径) 70 70 70 70[切割图片的宽度] repeat[图片延展方式 repeat重复 round平铺 stretch拉伸] 说明： 图像延伸方式：平铺(repeat)、铺满(round)或拉伸(stretch)。 切割图片宽度：顺时针，单位为像素(省略px)，可使用百分比。 有关border-image如何切割请看网址 http://www.w3cplus.com/content/css3-border-image
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2015-03-22

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

    2015-03-21

  • Meelu
    transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡函数 transition-timing-function

    2015-03-21

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

    2015-03-21

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

    2015-03-21

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

    2015-03-21

  • 慕前端4408879
    background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
    查看全部
    0 采集 收起 来源：CSS3背景 background-clip

    2015-03-21

  • 凤仪
    阴影 box-shadow（一） box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 注意： X轴偏移量: 允许为负数 Y轴偏移量: 允许为负数 [阴影颜色]: 省略默认为黑色 [投影方式]： 默认为外阴影 inset内阴影 可以写在参数的第一个或最后一个，其它位置是无效的。 如果添加多个阴影，只需用逗号隔开即可。
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2015-03-21

首页上一页1048104910501051105210531054下一页尾页

举报

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

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

查看已购买的课程