慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

阿斯顿CCC

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 复合写法： transition:all .5s ease-in-out .18s; transition-property有多个时，复合写法需写成all；或者写成background-color 3s linear , height 2s linear; 顺序不可出错，先duration再delay。

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2018-03-22
阿斯顿CCC

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。 transform-origin可以改变旋转rotate、位移translate、缩放scale、扭曲skew操作的中心位置。百分比写法：transform-origin:50% 100%;先x轴在y轴，关键词写法：transform-origin:center bottom;

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2016-02-11
阿斯顿CCC

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动）

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-02-11
BerylS

odd为奇数，even为偶数，2n+1,2n-1为奇数，2n为偶数

查看全部

0 采集收起来源：CSS3 nth-of-type(n)选择器
2016-02-11
BerylS

注意：用逗号隔开每组 background 的缩写值； background 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。

查看全部

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

border-origin 注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

查看全部

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

border-image 注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。 Firefox 26.0 下是可以准确区分的

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-02-10
阿斯顿CCC

div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5); } transform:scale(x倍数,y倍数) 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放） 注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。和skew不一样。

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2018-03-22
阿斯顿CCC

1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； 第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）注意：若写成skew(45deg),表示在x轴方向变形，不是xy轴都变形。

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2018-03-22
阿斯顿CCC

.wrapper div { width: 200px; height: 200px; background: orange; -webkit-transform: rotate(45deg); transform: rotate(45deg); } ①需要块级元素才能旋转 ②度数为正顺时针旋转，为负逆时针 ③记住写法：transform:rotate(20deg);

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2016-02-10
阿斯顿CCC

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。 .clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
阿斯顿CCC

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。 input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; } input[type="text"]:-moz-read-write{ border-color: #f36; } input[type="text"]:read-write{ border-color: #f36; }

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2018-03-22
阿斯顿CCC

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’” <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; }

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2018-03-22
阿斯顿CCC

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示 ::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; } 注意是双冒号

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2016-02-10
阿斯顿CCC

input[type="radio"]:checked{ } 匹配选中的元素，常用于单选复选框。

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2018-03-22

首页上一页 634 635 636 637 638 639 640 下一页尾页

0/150

提交

取消

开始学习

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

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