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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值