border-radius

CSS border-radius 能做什么?

在CSS中,使用border-radius指定八个半径值时,可以创建不同的形状。先来看一个为该特性制定的工具@Rachel Andrew今年在苏黎世的前端会议上谈到了CSS Grid布局的优势。在她演讲的最后,她提到了一个在我脑海中挥之不去的CSS 属性:通过border-radius可以使图像有良好的形状效果。听完这个演讲之后,我认为你肯定可以创造出更多的圆圈,并开始深入挖掘使用border-radius可以做什么?

Tabs with Round Out Borders

前几天藤藤在每一练中写了一个《CSS3制作Twitter信息框》效果,酷似Chrome浏览器的tabs效果:

藤藤每日一练——CSS3制作Twitter信息框

CSS3制作图片样式

在《jQuery和CSS3给图片制作圆角》一文中说过了,当你在Web页面制作中如果你直接把CSS3中的border-radiusbox-shadow应用在图片,浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法,就是把图片作为背景图片,这样我们就可以应用任何样式来修饰图片,而且此时浏览器也会完美的呈现出来。

jQuery和CSS3给图片制作圆角

圆角,这东西在Web页面应用方面,大家在熟悉不过的东西了,以前是使用图片来制作,但现在敢于挑战的同学也在尝试使用CSS3border-radius来制作圆角。在前面,我在《CSS3的圆角Border-radius》专门介绍过CSS3border-radius属性。

CSS3的圆角Border-radius

前面系统总结了CSS3GradientRGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中,大家都碰到过圆角的制作。

返回顶部