css3 border-radius圆角盒子

css圆角的制作方法很多,在css3没出来之前,我们一般使用图片配合css来完成,但css3发布后,可以直接用css3的border-radius来设置圆角,非常简单。

代码如下:
 

<style>
.radius{
  -moz-border-radius: 15px;   /* 火狐浏览器 */
  -webkit-border-radius: 15px;  /* 谷歌浏览器 */
  border-radius:15px;
  width:300px;
  height:300px;
  background:#4ca2d1;
}
</style>
<div class="radius"></div>


如下图:

css3 border-radius圆角盒子

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

CSS border用于设置HTML元素(如div)的边框,包括边框的宽度、颜色和样式。本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下。
本文章主要向码农介绍用CSS3如何绘制三角形,方法很简单,主要使用到css中的border属性,需要的码农可以参考下。
本文章向码农介绍CSS中使用border来创建三角形的基本思路和实例,文中同时还附带了对HTML5 Canvas和SVG三角形的介绍,需要的码农可以参考下
css中border的作用相信大家都知道,它的作用是用于设置边框,但是对于css border如何实现三角形图案,估计有很多朋友多不知道如何实现。本文章向大家介绍css border如何实现绚丽多彩的三角形图案。
以前只知道border属性是盒模型中的边框属性,一直不清楚每个边的border是矩形拼接有重合呢,还是梯形无缝拼接的。为了观察边框究竟是哪一种拼接方式,做了一下几个demo。
自从css3发布后,起功能变得非常强大,以前很多需要图片完成的icon,现在只需要几段css代码就可以完成。下面是css制作的圆,椭圆,三角形,箭头图标。