css3知识图解,CSS3小知识

1.边框圆角,边框阴影

border-radius:6px;

// border-radius:50%; //圆形

box-shadow: 1px 1px 1px #666; //box-shadow: h-shadow v-shadow blur spread color inset(outset);

2.背景图片的大小

background-size: 100% 100%; //对背景图片进行拉伸，使其完成填充内容区域

// background-size:50px 100px; //对背景图片进行拉伸，使其完成填充内容区域

3.文本效果

text-shadow: 5px 5px 5px #FF0000; //规定文字水平阴影、垂直阴影、模糊距离，以及阴影的颜色

word-wrap:break-word; //允许长单词换行到下一行

text-overflow:ellipsis; //显示省略符号来代表被修剪的文本 配合white-space:nowrap; overflow:hidden;使用

4.字体@font-face用的少，毕竟引入字体文件都是比较大的，得不偿失。(非必要情况勿用)

5.元素2D---移动、旋转、放大/缩小、翻转；3D---X轴旋转、Y轴旋转

transform: translate(50px,100px); //从其当前位置移动 left top

transform: rotate(30deg); //顺时针旋转给定的角度(允许负值--逆时针旋转)。

transform: scale(2,4); //尺寸会增加或减少，根据给定的宽度(X 轴)和高度(Y 轴)参数

transform: skew(30deg,20deg); //翻转给定的角度，根据给定的水平线(X 轴)和垂直线(Y 轴)参数

transform:matrix(0.866,0.5,-0.5,0.866,0,0); //把所有 2D 转换方法组合在一起

transform: rotateX(120deg); //围绕其 X 轴以给定的度数进行旋转

transform: rotateY(130deg); //围绕其 Y 轴以给定的度数进行旋转

-ms-transform: ;/*IE 9*/-webkit-transform: ;/*Safari and Chrome*/-o-transform: ;/*Opera*/-moz-transform: ;/*Firefox*/

6.过渡效果transition

div{width:100px;height:100px;background:yellow;transition:width 2s linear 2s, height 2s linear 2s,transform 2s linear 2s;//一般配合hover使用

-moz-transition:width 2s linear 2s, height 2s linear 2s, -moz-transform 2s linear 2s; /*Firefox 4*/-webkit-transition:width 2s linear 2s, height 2s linear 2s, -webkit-transform 2s linear 2s; /*Safari and Chrome*/-o-transition:width 2s linear 2s, height 2s linear 2s, -o-transform 2s linear 2s; /*Opera*/

}div:hover{width:200px;height:200px;transform:rotate(180deg);-moz-transform:rotate(180deg); /*Firefox 4*/-webkit-transform:rotate(180deg); /*Safari and Chrome*/-o-transform:rotate(180deg); /*Opera*/

}

7.动画@keyframes、animation--例子(输入框自定义光标动画)

.custom-cursor{width:2px;height:45px;background-color:#2F323A;position:absolute;top:32px;right:20px;animation:cursor 1s linear infinite;-webkit-animation:cursor 1s linear infinite;-moz-animation:cursor 1s linear infinite;-o-animation:cursor 1s linear infinite;

}@keyframes cursor{0% {

opacity:0}50%{opacity:0}50.1%{opacity:1}100%{opacity:1}}

@-webkit-keyframes cursor{0% {

opacity:0}50%{opacity:0}50.1%{opacity:1}100%{opacity:1}}

@-moz-keyframes cursor{0% {

opacity:0}50%{opacity:0}50.1%{opacity:1}100%{opacity:1}}

@-o-keyframes cursor{0% {

opacity:0}50%{opacity:0}50.1%{opacity:1}100%{opacity:1}}

8.box-sizing:border-box--------border和padding计算入width之内，其实就是怪异模式了,

设置了border-box后，两个width=50%并排显示加边框的时候不会错位，

多用于排版问题，很多情况下很实用，简化了计算位置的问题

box-sizing:border-box;

-moz-box-sizing:border-box;/*Firefox*/-webkit-box-sizing:border-box;/*Safari*/
50%;
border:1em solid red;float: left;