慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

雨醉风尘

a[class^=column]{background:red;} a[href$=doc]{background:green;} a[title*="box"]{background:blue;}

查看全部

0 采集收起来源：CSS3选择器属性选择器
2018-03-22
wyang

^开头，$结尾，*通配

查看全部

0 采集收起来源：CSS3选择器属性选择器
2015-05-21
yangmingyuan

Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-05-21
grace_0008

伸缩布局（一） CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。 Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。 Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox布局功能主要具有以下几点：第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；第五，可以控制元素在页面上的布局方向；第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-05-21
yangmingyuan

动画--过渡属性 transition-property 在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果当不设置中点值时，默认为all 当“transition-property”属性设置为all时，表示的是所有中点值的属性。

查看全部

2 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-05-21
yangmingyuan

到时候再来研究

查看全部

0 采集收起来源：切换背景图像综合练习题
2015-05-21
yangmingyuan

::before和::after ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
单单happy

前缀浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera

查看全部

0 采集收起来源：什么是CSS3？
2015-05-21
魂归战袍

:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。 :root 选择器等同于<html>元素，简单点说： :root{background:orange} html {background:orange;}

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2018-03-22
魂归战袍

multiple backgrounds 多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。语法缩写如下： background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 注意：用逗号隔开每组 background 的缩写值；如果有 size 值，需要紧跟 position 并且用 "/" 隔开；如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
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-05-21
魂归战袍

background-origin 设置元素背景图片的原始起始位置。语法： background-origin ： border-box | padding-box | content-box; 需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

查看全部

0 采集收起来源：CSS3背景 background-origin
2015-05-21
魂归战袍

text-shadow可以用来设置文本的阴影效果。语法 text-shadow: X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； Color：是指阴影的颜色，其可以使用rgba色

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2015-05-21
魂归战袍

@font-face { font-family: "MOOC Font"; src: url("http://www.imooc.com/Amaranth-BoldItalic.otf"); } 显示服务器端的字体

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2018-03-22
魂归战袍

text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 实现文字溢出时显示省略号

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-05-21

首页上一页 939 940 941 942 943 944 945 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果