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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 标标哟
    分开写比较好理解 background-position: left top, right bottom; background-repeat: no-repeat,no-repeat; background-size: 80% 50%,50% 40%; background-image:url(http://static.mukewang.com/static/img/logo_index.png), url(http://static.mukewang.com/static/img/logo_index.png);
    查看全部
    0 采集 收起 来源：CSS3背景 multiple backgrounds

    2017-01-26

  • 雨安
    box-shadow: 0 0 5px #f36;/*x轴 Y轴 阴影距离 颜色*/
    查看全部
    0 采集 收起 来源：CSS3选择器 :enabled选择器

    2017-01-26

  • 雨安
    在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 input[type="text"]:enabled{ border: 1px solid #f36; box-shadow: 0 0 5px #f36; }
    查看全部
    0 采集 收起 来源：CSS3选择器 :enabled选择器

    2018-03-22

  • 标标哟
    background-clip的参数设置的是裁剪后的保留部分
    查看全部
    0 采集 收起 来源：CSS3背景 background-clip

    2017-01-26

  • 标标哟
    text-shadow:x-offset y-offset blur color x：水平偏移距离 y：垂直偏移距离 blur：模糊距离，不能为负值，注意要加px单位！！！ color：阴影颜色
    查看全部
    0 采集 收起 来源：CSS3文字与字体 文本阴影text-shadow

    2017-01-26

  • 门掩重关萧寺中
    有时我们想改变两个或者多个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

    2017-01-26

  • 门掩重关萧寺中
    CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 ======================= -webkit-transition: background-color .5s ease .1s; transition: background-color .5s ease .1s;
    查看全部
    0 采集 收起 来源：CSS3中的动画--过渡属性 transition-property

    2017-01-26

  • 门掩重关萧寺中
    我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 .transform-origin div { -webkit-transform-origin: left top; transform-origin: left top; }
    查看全部
    0 采集 收起 来源：CSS3中的变形--原点 transform-origin

    2017-01-26

  • 门掩重关萧寺中
    matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。 ========= -webkit-transform: matrix(1,0,0,1,50,50); -moz-transform:matrix(1,0,0,1,50,50); transform: matrix(1,0,0,1,50,50);
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2017-01-26

  • 门掩重关萧寺中
    translate()函数可以将元素向指定的方向移动 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动） ======= -webkit-transform: translate(50px,100px); -moz-transform:translate(50px,100px); transform: translate(50px,100px);
    查看全部
    0 采集 收起 来源：CSS3中的变形--位移 translate()

    2017-01-26

  • 门掩重关萧寺中
    缩放 scale()函数 让元素根据中心原点对对象进行缩放。 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放） ============ div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5); }
    查看全部
    0 采集 收起 来源：CSS3中的变形--缩放 scale()

    2017-01-26

  • 门掩重关萧寺中
    扭曲skew()函数能够让元素倾斜显示。 ================ -webkit-transform: skew(45deg); -moz-transform:skew(45deg) transform:skew(45deg); ============= 1、skew(x,y)使元素在水平和垂直方向同时扭曲 2、skewX(x)仅使元素在水平方向扭曲变形 3、skewY(y)仅使元素在垂直方向扭曲变形
    查看全部
    0 采集 收起 来源：CSS3中的变形--扭曲 skew()

    2017-01-26

  • 门掩重关萧寺中
    rotate()函数通过指定的角度参数使元素相对原点进行旋转。 ================================= -webkit-transform: rotate(45deg); transform: rotate(45deg);
    查看全部
    0 采集 收起 来源：CSS3变形--旋转 rotate()

    2017-01-26

  • Ace_____
    media queries——媒体类型（二） 在实际中媒体类型有近十种之多，实际之中常用的也就那么几种，不过媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种： link方法 link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示。 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> @import方法 @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。 @importurl(reset.css) screen; @importurl(print.css) print; 在<head>中的<style>标签中引入媒体类型方法。 <head> <style type="text/css"> @importurl(style.css) all; </style> </head> @media方法 @media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。 （1）在样式文件中引用媒体类型： @media screen { 选择器{/*你的样式代码写在这里…*/} }
    查看全部
    0 采集 收起 来源：media queries——媒体类型（二）

    2018-03-22

  • Ace_____
    Media Queries——媒体类型（一） 随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面让用户有一个更好的体验。 Media Queries Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式。其实这个功能在CSS2.1中就有出现过，只不过那个时候此功能并不强大，我们最常见的就是给打印设备添加打印样式。随着时代的变化，这个模块功能越来越强大。 在彻底的了解Media Queries我们需要了解其中的两个重要部分，第一个是媒体类型，第二个是媒体特性。下面的内容我们简单的来了解这两个部分： 一、媒体类型 媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。 在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示： 值 设备类型 All 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打印机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种投影设备 Screen 电脑显示器 Speech 语音或音频合成器 Tv 电视机类型设备 Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端 其中Screen、All和Print为最常见的三种媒体类型。
    查看全部
    0 采集 收起 来源：Media Queries——媒体类型（一）

    2017-01-26

首页上一页329330331332333334335下一页尾页

举报

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

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

查看已购买的课程