慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

cherishs碎姑娘

结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。示例显示：比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。 HTML代码： <p>我是一个段落</p> <p> </p> <p></p> CSS代码： p{ background: orange; min-height: 30px; } p:empty { display: none; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—empty
2018-03-22
cherishs碎姑娘

结构性伪类选择器—root :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。示例演示：通过“:root”选择器设置背景颜色 HTML代码： <div>:root选择器的演示</div> CSS代码： :root { background:orange; } 演示结果： “:root”选择器等同于<html>元素，简单点说： :root{background:orange} html {background:orange;} 得到的效果等同。建议使用:root方法。另外在IE９以下还可以借助“:root”实现hack功能。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2018-03-22
cherishs碎姑娘

...^匹配类或者属性值开头为。。。。的元素； $匹配结尾为。。。。的元素； *匹配属性值任意位置含有。。。一致的字母

查看全部

0 采集收起来源：CSS3选择器属性选择器
2015-07-12
cherishs碎姑娘

四角改为圆角： border-radius:10px; 阴影属性创建立体效果： box-shadow:2px 6px 0px #B0483F; 伪元素制作导航列表项分割线： .nav li:before{content:"|";position:absolute;left:0px;} 使用伪元素删除第一项导航分割线： .nav li:first-child:before{display:none;}

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2018-03-22
cherishs碎姑娘

.. background-position:left top,right bottom; background-size:200px 80px,150px 55px; 用逗号隔开每组 background 的缩写值；如果有 size 值，需要紧跟 position 并且用 "/" 隔开；如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2018-03-22
cherishs碎姑娘

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
cherishs碎姑娘

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-07-12
cherishs碎姑娘

背景必须是no-repeat，这个属性才有效，否则它会从边框开始显示。

查看全部

0 采集收起来源：CSS3背景 background-origin
2015-07-12
cherishs碎姑娘

text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap;

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-07-12
cherishs碎姑娘

数字越大，边框越小

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2015-07-12
cherishs碎姑娘

其实我不明白，为什么要用百分数，而且百分数越大。边框越小

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2015-07-12
墨西哥鸡味卷

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。语法： animation-name: none | IDENT[,none|DENT]*; 1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）； 2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。

查看全部

0 采集收起来源：CSS3中调用动画
2015-07-12
墨西哥鸡味卷

div:hover { animation: changecolor 5s ease-out .2s; }

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2015-07-12
墨西哥鸡味卷

.transform-origin div { -webkit-transform-origin: left top; transform-origin: left top; }

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2015-07-12
墨西哥鸡味卷

-webkit-transition-property: width; transition-property: width;

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-07-12

首页上一页 875 876 877 878 879 880 881 下一页尾页

0/150

提交

取消

开始学习

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

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