首发于css3
css3 圆角(border-radius)详解

css3 圆角(border-radius)详解

在做网页的时候,常常需要实现圆角,以前的做法就是切图,现在就方便了,用css3里面的 border-radius 属性就可以直接实现。

border-radius 是一种缩写方法。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:

四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
一个值: 四个圆角值相同

使用 CSS3 border-radius 属性,可以给任何元素制作 "圆角"。背景颜色、边框、背景图片等

1. 指定背景颜色的元素圆角:

<style type="text/css">
	#rcorners1 {
		border-radius: 25px;
		background: #8AC007;
		padding: 20px; 
		width: 200px;
		height: 150px;    
	}
</style>

<body>
	<p id="rcorners1">圆角</p>
</body>

2. 指定边框的元素圆角:

<style type="text/css">
	#rcorners1 {
		border-radius: 25px;
		border: 5px solid #55aaff;
		padding: 20px;
		width: 200px;
		height: 150px;
	}
</style>

<body>
	<p id="rcorners1">圆角</p>
</body>

3. 指定背景图片的元素圆角:

<style type="text/css">
	#rcorners1 {
		border-radius: 25px;
		background: url(img1/i1.jpg) 200px/400px;
		padding: 20px; 
		width: 200px;
		height: 150px;   
	}
</style>

<body>
	<p id="rcorners1">圆角</p>
</body>

border-radius 可以指定每个圆角。根据四个值来设定

一、一个值

一个值的话和上面的案例一样,四个角都相同

二、两个值 - border-radius: 15px 50px;

俩个值的话就是斜对角相同

三、三个值 - border-radius: 15px 50px 90px;

第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角

四、四个值 - border-radius: 15px 50px 90px 5px;

第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。

总结:

圆角有很多优点

一是减少网站维护工作量;
二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载入速度将变快;
三是增加视觉美观性

编辑于 2020-09-03 17:12