文章目录

css3的border-radius圆角使用方法详解

css3中的border-radius属性,我们一般用到的时候,就是需要圆角的时候。

border-radius其实是一个简写的属性。

主要是用于设置四个border-*-radius属性。

当然四个值不是全都需要设置,你也可以只设置两个或三个。

如果一个值,那么对应的top-left、top-right、bottom-right、bottom-left四个值都是一样的。

border-radius:30px;

如果是两个值,那么top-left和bottom-right相等,为第一个值,top-right和bottom-left值相等,为第二个值。就和border设置两个值一样的道理。

如果是三个值,那么第一个值是设置top-left,而第二个值是top-right 和bottom-left并且他们会相等,第三个值是设置bottom-right。

如果是四个值,那么第一个值是设置top-left,而第二个值是top-right 第三个值bottom-right 第四个值是设置bottom-left。

除了上面说的简写外,还可以和border一样,分别的对应四个角来写,如下:

border-top-left-radius: //左上角

border-top-right-radius: //右上角

border-bottom-right-radius: //右下角

border-bottom-left-radius: //左下角

分别是水平方向和竖直方向半径,第二值省略的情况下,水平方向和竖直方向的半径相等。

实例1

画圆角边框,一般为了美观,我们会将div或图片,或是其他的元素的边框设置成圆角。

<style>

.img{border-radius:20px 40px 60px 80px;}

</style>

实例2

画实心圆的方法,是宽度和高度要一致,也就是正方形。然后四个角设置为高度或者宽度的1/2即可。

<style>

width:100px;

height:100px;

background-color:#d7004d;

border-radius:50px;

</style>

用css3的border-radius属性来实现圆角的方式是非常方便的,但是到目前为止兼容性不是很好。

-webkit-border-radius

-moz-border-radius

-ms-border-radius

-o-border-radius

如果要考虑旧版本的浏览器,在开发使用的过程中需要加上私有前缀,也就是上面的代码才能完整解决css3圆角问题。

本文网址:http://www.santii.com/article/95.html


数据更新时间:2018-09-22