CSS3基础知识

CSS3基础知识

背景

设置背景图片大小 -moz-background-size:50px 50px;

不同位置剪切背景图片 -moz-background-clip:content-box;

border-box：边框内显示图片。

padding：内边距内显示图片。

content：内容内显示图片。

不同位置显示背景图片 -moz-background-origin:border-box;

border-box：从border区域开始显示背景。

padding：从padding区域开始显示背景。

content：从content区域开始显示背景。

伪类

在内容的前面插入内容 .test:before{ content:"您使用的浏览器支持content属性"; }

在内容的后面插入内容 .test:after{ content:"CC使用的浏览器支持content属性"; }

文本

文字阴影 text-shadow: 5px 5px 1px #AAA;

文字内容是否截断 text-overflow:clip|ellipsis; clip:

单词操作边界直接切断

ellipsis:单词操作边界使用省略号 设置内容是否换行 word-wrap:break-word;

文本换行 normal

连续内容边界内换行 break-word

基础盒模型

轮廓 outline-width:10px; 轮廓边框宽度

outline-style:solid; 轮廓边框风格

outline-color:red; 轮廓边框颜色

outline-offset:100px; 轮廓距离边框的距离

内容

文字列显示

-moz-column-count:3; 将内容分成几列

-moz-column-gap:20px; 列和列的间距

-moz-column-rule-style:solid; 列分隔线风格

-moz-column-rule-width:1px; 列分隔线宽度

-moz-column-rule-color:red; 列分隔线颜色

CSS3基础知

过渡

旋转角度 -moz-transform:rotate(180deg);

旋转基点设置 x y -moz-transform-origin:50px 50px;

水平垂直移动 -moz-transform:translate(12px,20px);

水平垂直缩放 -moz-transform:scale(0.3);

水平垂直扭曲 -moz-transform:skew(10deg,-30deg);