慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

JohnieXu

详细介绍参见：http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-12-25
qq_传说_5

CSS3 结构性伪类选择器—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
qq_传说_5

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

查看全部

0 采集收起来源：CSS3背景 background-clip
2016-12-25
qq_传说_5

@font-face

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2016-12-25
qq_传说_5

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);从右向左线性渐变。 background-image:linear-gradient(to top left,red, orange,yellow,green,blue,indigo,violet); }

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2016-12-25
慕粉3821539

多重背景，也就是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-image:url1,url2,...,urlN; background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color; 注意：用逗号隔开每组 background 的缩写值；如果有 size 值，需要紧跟 position 并且用 "/" 隔开；如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2018-03-22
慕粉4367238

/*使用伪元素制作导航列表项分隔线*/ li{ background-image:linear-gradient(0deg,#b64b41,#f65f57,transparent), linear-gradient(180deg,#b64b41,#f65f57,transparent); background-repeat:no-repeat,no-repeat; background-size:2px 25px,2px 25px; background-position:0px top,0px bottom; }

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2016-12-24
慕粉4367238

/*制作圆*/ border-radius: 7px; /*制作导航立体风格*/ box-shadow: 1px 4px 2px #b64b41; /*使用伪元素制作导航列表项分隔线*/ li{ background-image:radial-gradient(#b64b41,#f65f57); background-repeat:no-repeat; background-size:2px 25px; background-position:left center; } /*删除第一项和最后一项导航分隔线*/ li:first-child{ background-image: none; }

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2016-12-24
慕粉4367238

background-position设置的是图片的左上角放在容器中的坐标位置

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2016-12-24
慕粉4367238

background-size:auto|像素值|百分比|cover|contain cover:缩放图像以便充满整个容器，缩放后的图像可能比容器大。 cover就是保证容器要被完全cover的意思 contain：缩放图像使其宽/高与容器相同，缩放后的图像大小小于等于容器。 contain就是保证容器要能contain图片

查看全部

0 采集收起来源：CSS3背景 background-size
2016-12-24
慕粉4367238

backgrond-clip: border-box|padding-box|content-box|text|inherit 作用范围是背景，包括背景颜色和背景图片。 border-box:元素的边框下面也显示背景，默认 padding-box:元素的padding显示背景 content-box:仅元素的内容区显示背景

查看全部

0 采集收起来源：CSS3背景 background-clip
2016-12-24
慕粉1302539855

注意：

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2016-12-24
慕九州3226054

以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如：

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-12-23
慕九州3226054

1、注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-12-23
慕九州3226054

div.semi-circle{ height:100px; width:50px; background:#9da; border-radius:50px 0 0 50px; } 制作左半圆形

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2016-12-23

首页上一页 343 344 345 346 347 348 349 下一页尾页

0/150

提交

取消

开始学习

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

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