CSS3听说已久,其实不知不觉也接触了很多,看过很多DEMO,也大大小小用过一些特性,如圆角等。嗯,都相当简单,就那么几个属性,但看了人家的DEMO纯CSS3实现的效果还是心中一颤,太牛B了,于是乎决定有空自己研究一下CSS3及相关内容,明白原理,不想停留在只懂些简单的概念而没有实践的阶段,本系列不会更新很快的说。。。。
提供个DEMO链接,懒得写-moz-,-webkit-,所以只支持IE10,其实想支持firefox,chorme也是完全没问题的
DEMO只支持IE10+
CSS3自学笔记1.用DIV画简单的图
今天先来看看CSS3如何画简单的图,经常看到别人用CSS3的各种圆角,渐变,旋转,等等特性画复杂度很高的图,实际看源码,发现都是一个一个DIV拼出来的,就先看一个DIV能画什么吧。另外,测试一般都在IE10下进行,写的代码不考虑Chrome,Firefox等浏览器效果,不是因为这些浏览器不好,而是IE10更符合标准,不用加 -webkit-,-moz-之类的前缀,如果想兼容的话,自己把相关的CSS3代码复制一份,然后加前缀吧,就应该可以兼容了。
圆形、椭圆形
这个用圆角就能实现,平时用圆角做按钮什么的都比较熟悉了,画一个圆或椭圆自然不在话下,首页给个
<div class="tuoyuan"></div>
比如我想画个橄榄球的形状,则应该是个扁扁的长方形,然后把边设置幅度就可以了,先设为宽度100,高度60,再看看CSS3的四个属性
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius分别可以给上左上右下左下右设置弯曲度,第一个参数为水平弯曲度,第二个为垂直弯曲度,保持顺滑的椭圆形,就是水平就是宽度/2于是
.tuoyuan{
width: 100px;
height: 60px;
background-color: #B10326;
border-top-left-radius: 50px 30px;
border-top-right-radius: 50px 30px;
border-bottom-left-radius: 50px 30px;
border-bottom-right-radius: 50px 30px;
}
如果是圆形的话,也相当简单,就把width=height就行了。其实后面4句可以用“border-radius:50% 50%;”一句代替。