长方形图片html圆形,css实现圆角矩形、半圆、圆形效果—border-radius使用详解

传统的圆角矩形实现，必须使用多张图片作为背景图案。CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了。

css实现圆角矩形、半圆、圆形效果的优点：

* 减少维护的工作量，不再需要使用图片。

* 提高网页性能，网页的载入速度将变快。

* 增加视觉可靠性。某些情况下，背景图片会下载失败，CSS3就不会发生这种情况。

border-radius属性

CSS3圆角只需设置一个属性：border-radius(含义是”边框半径”)。

为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

比如，下面是一个div方框：

现在设置它的圆角半径为15px：

border-radius: 15px;

这条语句同时将每个圆角的”水平半径”(horizontal radius)和”垂直半径”(vertical radius)都设置为15px。

border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。

如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。

如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。

如果设置四个值，则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

border-radius: 15px 5px;

border-radius: 15px 5px 25px;

border-radius: 15px 5px 25px 0px;

(左下角的半径为0，就变成直角了。)

单个圆角的设置

除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。

如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。

border-top-left-radius: 15px;

border-top-left-radius: 15px 5px;

注意：

CSS3实现圆角需要使用border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。

-webkit-border-radius

-moz-border-radius

-ms-border-radius

-o-border-radius

border-radius的优势不仅仅在制作圆角的边框，还是利用border-radius属性来画圆和半圆。

1、制作半圆的方法：

元素的高度是宽度的一半，左上角和右上角的半径元素的高度一致(大于高度也是可以的，至少为height值)。

.semi-circle{

width:100px;

height:50px;//高度是宽度的一半

background-color:#000;

border-radius:50px 50px 0 0;//左上和右上至少为height值

}

效果:

知道了如何画上半圆，就会举一反三画其他方向的圆了，看完教程要马上试一试哦，学习

2、画实心圆的方法：

原理：设置DIV宽度和高度一致(正方形)，然后四个角设置为高度或者宽度的1/2.

.circle{

width:100px;

height:100px;

background-color:#cb18f8;

border-radius:50px;

}

效果：

本文来自投稿，不代表中国网页设计立场，如若转载，请注明出处：http://www.125jz.com/1060.html