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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • yunyun_0124
    @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }
    查看全部
    0 采集 收起 来源：CSS3文字与字体 嵌入字体@font-face

    2015-03-26

  • yunyun_0124
    text-overflow:ellipsis; 溢出内容显示省略text-overflow:clip; 剪切 white-space:nowrap;强制文本在一行显示
    查看全部
    0 采集 收起 来源：CSS3文字与字体 text-overflow 与 word-wrap

    2015-03-26

  • yunyun_0124
    background-image:linear-gradient(to top left,red,orange);线性渐变
    查看全部
    0 采集 收起 来源：CSS3颜色 渐变色彩 

    2015-03-26

  • colorful_star
    一直在模仿，从未去超越： /*制作圆*/border-radius: 8px; /*制作导航立体风格*/box-shadow: 0 5px 0 #ba4a45; *使用伪元素制作导航列表项分隔线*/ .nav li:after{ content:""; position:absolute;right:0px;top:15px; height:20px;width:1px; background:linear-gradient(to bottom,red,gray,red); } /*删除第一项和最后一项导航分隔线*/ .nav li:last-first:after{} .nav li:last-child:after{width:0px;height:0px;}
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2018-03-22

  • colorful_star
    background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top / 75% 55%, url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom / 50% 40% ;
    查看全部
    0 采集 收起 来源：CSS3背景 multiple backgrounds

    2015-03-26

  • DoDo607
    有个小技巧。就是把原来的 input 通过 opacity隐藏掉。然后z-index放在最上面。 其实我们有点中input.
    查看全部
    0 采集 收起 来源：CSS3选择器 :checked选择器

    2015-03-25

  • HelloYangfan
    在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。 none 不生成任何内容 attr 插入标签属性值 url 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） string 插入字符串
    查看全部
    0 采集 收起 来源：CSS生成内容

    2015-03-25

  • HelloYangfan
    外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。 outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit outline-color 定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色。 outline-style 定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为none，省略后不对该轮廓线进行任何绘制。 outline-width 定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为medium，表示绘制中等宽度的轮廓线。 outline-offset 定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。 inherit 元素继承父元素的outline效果。
    查看全部
    0 采集 收起 来源：CSS3外轮廓属性

    2015-03-25

  • HelloYangfan
    resize属性，允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。可以使用overflow属性的任何容器元素。 resize: none | both | horizontal | vertical | inherit none 用户不能拖动元素修改尺寸大小。 both 用户可以拖动元素，同时修改元素的宽度和高度 horizontal 用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。 vertical 用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。 inherit 继承父元素的resize属性值。
    查看全部
    0 采集 收起 来源：自由缩放属性resize

    2015-03-29

  • 虹之翼
    background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。 语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
    0 采集 收起 来源：CSS3背景 background-size

    2018-03-22

  • 虹之翼
    background-clip 用来将背景图片做适当的裁剪以适应实际需要。 语法： background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
    查看全部
    0 采集 收起 来源：CSS3背景 background-clip

    2015-03-25

  • 虹之翼
    background-origin 设置元素背景图片的原始起始位置。 语法： background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
    查看全部
    0 采集 收起 来源：CSS3背景 background-origin

    2015-03-25

  • HelloYangfan
    布局 ---> display: flex; 方向 ---> flex-direction: row(横)||column(竖); 上下 ---> align-items: flex-start||center||flex-end; 左右 ---> justify-content: 同上; 倒序 ---> row-reverse
    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（二）

    2018-03-22

  • HelloYangfan
    CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。
    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（一）

    2015-03-25

  • HelloYangfan
    在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型。 1.W3C标准盒模型 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 element空间宽度＝内容宽度＋内距＋边框＋外距 内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） element宽度＝内容宽度＋内距＋边框（width为内容宽度） 2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”） 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距） 内盒尺寸计算（元素大小） element高度＝内容高度（height包含了元素内容宽度、边框、内距） element宽度＝内容宽度（width包含了元素内容宽度、边框、内距） CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式。 box-sizing: content-box | border-box | inherit content-box 默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height border-box 重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。
    查看全部
    0 采集 收起 来源：CSS3 盒子模型

    2015-03-25

首页上一页1027102810291030103110321033下一页尾页

举报

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

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

查看已购买的课程