一、圆角边框
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;
}
八、媒体查询
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;
}
transform是css3的新特性之一。有了它可以box module变的更真实,这篇文章将全面介绍关于transform的使用。
在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。
进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。
position:sticky,这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。position:sticky 的生效是有一定的限制的
网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。
css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。
CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。
CSS3是CSS(层叠样式表)技术的升级版本,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。这篇文章主要整理一些关于css3中的鲜为人知的属性
今天给大家分享一款非常常用的css 加载动画,这款CSS3 Loading动画主要由几个小球通过规律的上下跳动,渐隐渐显而成,效果十分不错。尤其在移动端中使用,基本代替了图片来实现加载的效果。
css3里有个很强大的功能,就是计算器,使用它可以很方便对页面中的任意元素进行计数,实现类似于有序列表的功能。与有序列表相比,突出特性在于可以对任意元素计数,同时实现个性化计数。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!