慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

goping

如rotate(),skew(),scale(),translate()，都可以使用矩阵matrix()函数来代替。 Matrix()与translate()关系：translate(x,y)对应Matrix(1,0,0,1,x,y); Matrix()与scale()关系：scale(x,y)对应Matrix(x,0,0,y,0,0); Matrix()与rotate()关系：rotate(x)对应Matrix(cos(x),sin(x),-sin(x),cos(x),0,0) Matrix()与skew()关系：skew(x,y)对应Matrix(1,tan(x),tan(y),1,0,0)

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-03-10
yangyuan

设置背景图片的大小，以长度值或百分比显示，还可以通过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
yangyuan

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

查看全部

0 采集收起来源：CSS3背景 background-clip
2016-03-10
yangyuan

设置元素背景图片的原始起始位置。语法： background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

查看全部

0 采集收起来源：CSS3背景 background-origin
2016-03-10
yangyuan

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

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2016-03-10
yangyuan

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。比如： p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ }

查看全部

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

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-03-10
一支猫的烦恼

1，绝对定对会对知道固定宽高的元素设置为position:absolute;left:50%;top:50%;margin:左值取负的宽度一半，上取负的高度值一半 2，不确定宽度高度元素居中，transform:translate(-50%,-50%)同样绝对定位，left一半，top一半

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-03-10
goping

代码理解：::selection 中俩冒号是什么鬼？为嘛不用一冒号咧？俩冒号是伪元素（CSS3），一冒号是伪类。 ::selection 选择器匹配被用户选取的选取是部分。只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。是规范来的

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2016-03-10
yangyuan

渐变写法：background-image:linear-gradient(to top left,#fff,#f00);/*右下角到左上角*/

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2016-03-10
yangyuan

语法： color：rgba(R,G,B,A) 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。如：background-color:rgba(100,120,50,0.5);

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2016-03-10
yangyuan

border-image的语法： border-image:url(border.png/*图片路径*/) 70 70 70 70/*切割图片的宽度，单位为像素，单省略px也可以使用百分比，遵循顺时针的规律来分别设置，也可以简写为70*/ repeat/*图片延伸方式三个可选参数为别为：round(平铺) repeat(重复) stretch(拉伸)*/

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-03-10
影布蚀裳

变形--扭曲 skew() 扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 Skew()具有三种情况： 1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2016-03-10
影布蚀裳

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2016-03-10
goping

ul > li li 是ul 的一级子元素，就是儿子而ul li 里可能是儿子，或者孙子...

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—last-child
2018-03-22

首页上一页 607 608 609 610 611 612 613 下一页尾页

0/150

提交

取消

开始学习

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

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