首页 > 代码库 > 记录工作中常用的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 */
width:50%;
border:1em solid red;
float: left;
记录工作中常用的CSS3
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。