首页 > Web开发 > 详细

css3新特性总结

时间:2020-09-30 11:25:24      阅读:37      评论:0      收藏:0      [点我收藏+]

一、圆角边框

border-radius:5px;

 

二、多背景图

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

 

三、颜色和透明度(由原来的rgb到现在的rgba)

background: rgba(0,0,0,.5);

 

四、多列布局和弹性盒模型

display: flex;

 

五、盒子的变幻(2D、3D)

transform: translate(50px,100px);//移动
transform: rotate();//旋转
transform: scale();//缩放
transform: skew();//倾斜

 

六、过渡和动画

transition: width 1s linear 2s;
animation: myfirst 5s;
@keyframes myfirst {
    0% {background: block;}
    25% {background: red;}
    50% {background: yellow;}
    100% {background: green;}
}

 

七、引入web字体(在服务器端存储)

@font-face {
    font-family: myfirstfont;
    src: url(sansation_light.woff);
}
div {
    font-family: myfirstfont;
}

广州vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

八、媒体查询

body{
    background: yellow;
}
@media screen and (max-width: 480px){
    background: red;
}

 

九、阴影

h1 {//文字阴影
    text-shadow: 5px 5px 5px red;
}
div {//盒子阴影
    box-shadow: 10px 5px 5px yellow;
}
 

css3新特性总结

原文:https://www.cnblogs.com/ypppt/p/13753275.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!