css3整理笔记

resize

调节元素尺寸大小，需要与对象的overflow属性配合使用

属性值：

none: 不允许缩放
both: 宽高都允许缩放
horizontal: 允许调节元素的宽度
vertical: 允许调节元素的高度

例如：设置textarea不缩放：resize:none

box-sizing

设置对象的盒模型组成模式

属性值：

content-box: 给元素定义的宽和高中不包含padding和border
border-box: 给元素定义的宽和高中包含padding和border

当给多列元素设置百分比宽的时候，常用box-sizing: border-box

@media

指定样式表规则用于指定的媒体类型和查询条件，其中包括width（屏幕宽）、height（屏幕高）、device-width（屏幕可见宽度）、device-height（屏幕可见高度）、orientation（页面可见区域高度是否大于或等于宽度，如果是，则：orientation:portrait，否则，orientation:landscape）、aspect-ratio（页面可见区域宽度与高度的比率，比如aspect-ratio:1680/957）、device-aspect-ratio（屏幕可见宽度与高度的比率，如常讲的显示器屏幕比率：4/3, 16/9, 16/10）

@media screen and (max-800px){ … }
@import url(example.css) screen and (800px);
<link media="screen and (800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (800px)" rel="stylesheet" href="example.css" ?>

View Code

!important

提升指定样式规则的应用优先权

div{color:#f00!important;color:#000;}
// 在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00

div{color:#f00!important;}
div{color:#000;}
// 在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00

content

常用在:berfor和:after伪类中，在元素前或后显示内容

<style>
p:after{content:"是"}
p:after{content:attr(title)};
p:after{content:url(../../skin/ico.png)};

.counter1 li{counter-increment:testname;}
.counter1 li:before{content:counter(testname)".";}
</style>
<li class="counter1">
    <strong>默认时的计数器：</strong>
    <ol>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>
</li>

View Code

text-transform

设置文本的大小写

none：无转换
capitalize：将每个单词的第一个字母转换成大写
uppercase：转换成大写
lowercase：转换成小写

text-indent

设置文本的缩进（值可以为像素或百分比）

letter-spacing

设置文字的之间的间隔

word-spacing

设置单词之间的间隔

点击文字时也选中单选框或复选框

<input type="checkbox" id="chk1" name="chk" /><label for="chk1">选项</label>

View Code

让层在falsh上显示

设置false的wmode值为transparent或opaque

<param name="wmode" value="transparent" />

View Code

border-colors

设置元素边框的多重颜色

-moz-border-top-colors:#200 #500 #800 #900 #a00 #b00;
-moz-border-right-colors:#200 #500 #800 #900 #a00 #b00;
-moz-border-bottom-colors:#200 #500 #800 #900 #a00 #b00;
-moz-border-left-colors:#200 #500 #800 #900 #a00 #b00;

View Code

box-reflect

设置元素的倒影

<style>
html,body{
    margin:50px 0;
}
.reflect{
    width:950px;
    margin:0 auto;
    -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
    font:bold 100px/1.231 georgia,sans-serif;
    text-transform:uppercase;
}
</style>
<div class="reflect">你看到倒影了么？</div>

View Code

background-attachment

设置背景图像是随内容滚动还是固定

fixed：背景图像相对于窗体固定。
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

text-fill-color

设置字体颜色

例如：渐变字体

<style>
html,body{
    margin:50px 0;
}
.text-fill-color{
    width:950px;
    margin:0 auto;
    background:-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font:bold 95px/1.231 georgia,sans-serif;
    text-transform:uppercase;
}
</style>
<div class="text-fill-color">text-fill-color</div>

View Code