慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

七月有风

色彩 CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA。

查看全部

0 采集收起来源：CSS3能做什么？
2016-06-16
七月有风

圆角效果以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。

查看全部

0 采集收起来源：CSS3能做什么？
2016-06-16
七月有风

在编写CSS3样式时，不同的浏览器可能需要不同的前缀 -webkit：chrome和safari -moz：firefox -ms：IE -o：opera

查看全部

0 采集收起来源：什么是CSS3？
2016-06-16
七月有风

目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了； IE10以后也开始全面支持CSS3了。

查看全部

0 采集收起来源：什么是CSS3？
2016-06-16
荆棘王冠lily3220076

变形--扭曲 skew() 扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 Skew()具有三种情况： 1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）; 通过skew（）函数将长方形变成平行四边形。 HTML代码： <div class="wrapper"> <div>我变成平形四边形</div> </div> CSS代码： .wrapper { width: 300px; height: 100px; border: 2px dotted red; margin: 30px auto; } .wrapper div { width: 300px; height: 100px; line-height: 100px; text-align: center; color: #fff; background: orange; -webkit-transform: skew(45deg); -moz-transform:skew(45deg) transform:skew(45deg); }

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2018-03-22
荆棘王冠lily3220076

变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 <div class="wrapper"> <div></div> </div> CSS代码： .wrapper { width: 200px; height: 200px; border: 1px dotted red; margin: 100px auto; } .wrapper div { width: 200px; height: 200px; background: orange; -webkit-transform: rotate(45deg); transform: rotate(45deg); } 旋转方向沿着下面的那条水平线进行顺时针或者逆时针旋转。

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2018-03-22
呢子酱001

如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2016-06-15
呢子酱001

Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2016-06-15
Eva__HY

text-overflow:ellipsis;文本超出时显示为省略号 | clip 文本超出时剪切 overflow：hidden；文本超出隐藏 white-space:nowrap;强制文本在一行

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-06-15
在你坟前蹭个WiFi

CSS3 opacity 属性 CSS 参考手册实例设置 div 元素的不透明级别： div { opacity:0.5; } 亲自试一试您可以在本页底部找到更多实例。浏览器支持所有浏览器都支持 opacity 属性。注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。定义和用法 opacity 属性设置元素的不透明级别。默认值： 1 继承性： no 版本： CSS3 JavaScript 语法： object.style.opacity=0.5 语法 opacity: value|inherit; 值描述测试 value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。测试 inherit 应该从父元素继承 opacity 属性的值。

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2016-06-15
kelvinwxq

background:url(http://static.mukewang.com/static/img/logo_index.png) 0 0/60% 50% no-repeat, url(http://static.mukewang.com/static/img/logo_index.png) right bottom/50% 45% no-repeat;

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2016-06-14
郑宇轩shine

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

查看全部

0 采集收起来源：CSS3 only-of-type选择器
2016-06-14
郑宇轩shine

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

查看全部

0 采集收起来源：CSS3 nth-of-type(n)选择器
2016-06-14
郑宇轩shine

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2016-06-14
郑宇轩shine

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-child(n)
2016-06-14

首页上一页 497 498 499 500 501 502 503 下一页尾页

0/150

提交

取消

开始学习

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

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