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);