-
[transition-property] [transition-duration] [transition-timing-function] [transition-delay]
e.g.
transition: all .5s ease-in .2s
查看全部 -
all时，表示的是所有中点值的属性。假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。
查看全部 -
特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。
用一个简单的例子来说明这个问题：
假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。
查看全部 -
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。
查看全部 -
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform:rotate(-20deg);逆时针旋转20°
元素自中心旋转 正值为顺时针 负值为逆时针
查看全部 -
单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
示例演示：
通过“:checked”状态来自定义复选框效果。
查看全部 -
<input type="submit" value="禁止点下一步" disabled />
style 里得设置“:disabled”
查看全部 -
伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
那么现在就可以完整的回答标题中的问题了，对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
所以，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全查看全部 -
用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。
background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat 0 0/75% 55%,
url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom/50% 40%;
查看全部 -
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
语法：
@font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。
比如：
p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ }查看全部 -
这样也算用处吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—empty</title>
<style>
div {
height: 30px;
background: red;
}
div:empty {
display: none;
}
</style>
</head>
<body>
<div>content</div>
<hr />
<div>
</div>
<hr />
<div id="last"></div>
<button onclick="check1()">123</button>
</body>
<script type="text/javascript">
function check1() {
var last = document.getElementById("last");
last.innerHTML = '123';
alert(last.innerHTML);
last.value = "123";
}
</script>
</html>
查看全部 -
CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。
outline属性早在CSS2中就出现了，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持，在CSS3中对outline作了一定的扩展，在以前的基础上增加新特性。outline属性的基本语法如下：
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style，而outline-width相当于border-width，只不过CSS3给outline属性增加了一个
outline-offset属性，其取值说明如下。属性值
属性值说明
outline-color
定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色。
outline-style
定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为none，省略后不对该轮廓线进行任何绘制。
outline-width
定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为medium，表示绘制中等宽度的轮廓线。
outline-offset
定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。
inherit
元素继承父元素的outline效果。
查看全部 -
自由缩放属性resize
为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。
在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。
resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。
resize: none | both | horizontal | vertical | inherit取值说明：
属性值
取值说明
none
用户不能拖动元素修改尺寸大小。
both
用户可以拖动元素，同时修改元素的宽度和高度
horizontal
用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。
vertical
用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。
inherit
继承父元素的resize属性值。
例如：通过resize属性，让文本域可以沿水平方向拖大。代码为：
textarea { -webkit-resize: horizontal; -moz-resize: horizontal; -o-resize: horizontal; -ms-resize: horizontal; resize: horizontal; }查看全部 -
Responsive设计——不同设备的分辨率设置
下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：
1.1024px显屏
@media screen and (max-width : 1024px) { /* 样式写在这里 */ }2.800px显屏
@media screen and (max-width : 800px) { /* 样式写在这里 */ }3.640px显屏
@media screen and (max-width : 640px) { /* 样式写在这*/ }4.iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ }5.iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ }6.iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ }现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：
@media (max-width: 480px) { ... }
@media (max-width: 768px) { ... }
@media (min-width: 768px) and (max-width: 980px) { ... }
@media (min-width: 1200px) { .. }
查看全部 -
Responsive设计——meta标签
最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。
个meta标签被称为可视区域meta标签，其使用方法如下。
<meta name=”viewport” content=”” />
在content属性中主要包括以下属性值，用来处理可视区域。
在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下：
<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
另外一点，由于Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求。
脚本下载地址：
media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> <![endif]>
查看全部
举报