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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 遥远的咫尺3378052
    x轴阴影偏移量，如为正值，阴影在对象的右边，如为负值，则阴影在对象的左边。 y轴阴影偏移量，如为正值，阴影在对象的底部，如为负值，则阴影在对象的顶部。
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2016-05-22

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

    2016-05-22

  • 遥远的咫尺3378052
    在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。 -webkit : chrome和safari ; -moz : firefox ; -ms : IE ; -o : opera . 圆角效果 border-radius是向元素添加圆角边框。使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。 box-shadow是向盒子添加阴影。支持添加一个或者多个。 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数(则往相反方向投射阴影) box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; border-image的语法： border-image:url(border.png)70 70 70 70/*切割图片的宽度，单位为像素，但要省略px也可以使用百分比，遵循顺时针的规律来分别设置，也可以简写为70 repeat ; 图片延伸方式 三个可选参数为别为：round(平铺) repeat(重复) stretch(拉伸)*/ 图片延伸方式，当为repeat时，重复中间的图片，切割图片的宽度<70时，多余的部分被切掉；为round时，重复中间的图片，切割图片的宽度<70时，多余的部分不会被切割，但会被挤压；为stretch时，图片不重复，中间的图片会拉伸
    查看全部
    0 采集 收起 来源：什么是CSS3？

    2018-03-22

  • ThinkAllNight
    由于Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求。 脚本下载地址： media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> ​<![endif]>
    查看全部
    0 采集 收起 来源：Responsive设计——meta标签

    2018-03-22

  • Dream0703
    变形--位移 translate() translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动） 要想实现div的水平垂直居中，transform:translate(50%,50%)
    查看全部
    0 采集 收起 来源：CSS3中的变形--位移 translate()

    2016-05-22

  • Dream0703
    变形--缩放 scale() 缩放 scale()函数 让元素根据中心原点对对象进行缩放。 缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）
    查看全部
    0 采集 收起 来源：CSS3中的变形--缩放 scale()

    2016-05-22

  • Dream0703
    变形--扭曲 skew()--在二维 扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 Skew()具有三种情况： 1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； 第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形） 注意：角度为正时，水平扭曲相当于捏住左上角和右下角在水平方向拉伸，垂直扭曲相当于在竖直方向拉伸，角度为负时，就是左下角和右上角
    查看全部
    0 采集 收起 来源：CSS3中的变形--扭曲 skew()

    2016-05-22

  • Dream0703
    旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 div{ transform:totate( 30deg) }
    查看全部
    0 采集 收起 来源：CSS3变形--旋转 rotate()

    2016-05-22

  • Dream0703
    ::before和::after ::before和::after这两个主要用来给元素的前面或后面插入内容，内容就是content设置的内容，这两个常和"content"配合使用，随后设置的样式也是只针对content的内容的，对元素里原本具有的内容不起作用。使用的场景最多的就是清除浮动。 .clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}
    查看全部
    0 采集 收起 来源：CSS3选择器 ::before和::after

    2018-03-22

  • Dream0703
    :read-write选择器 “:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。--------针对于文本text，文本域textarea
    查看全部
    0 采集 收起 来源：CSS3选择器 :read-write选择器

    2016-05-22

  • Dream0703
    :read-only选择器 “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
    查看全部
    0 采集 收起 来源：CSS3选择器 :read-only选择器

    2016-05-22

  • 紫色輪回
    总结下，CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形; transition: property duration timing-function delay; animation: KeyframesName duration timing-function delay iteration-count direction play-state fill-mode;
    查看全部
    0 采集 收起 来源：CSS3中设置动画播放时间

    2016-05-22

  • Dream0703
    :enabled选择器 在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 语法：input[attr="val"]:enabled
    查看全部
    0 采集 收起 来源：CSS3选择器 :enabled选择器

    2018-03-22

  • Dream0703
    only-of-type选择器 “:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素
    查看全部
    0 采集 收起 来源：CSS3 only-of-type选择器

    2016-05-21

  • Dream0703
    only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
    查看全部
    0 采集 收起 来源：CSS3 only-child选择器

    2016-05-21

首页上一页519520521522523524525下一页尾页

举报

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

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

查看已购买的课程