css实现圆角的几种方法是什么?

html-css014

css实现圆角的几种方法是什么?,第1张

有四种方法可以实现圆角。

第一、直接写CSS代码:border-radius

第二、四个圆角贴图;制作四个圆角的图片,然后用css定义

第三、直接制作整个圆角矩形背景

第四、定义12个背景色:左上角4个,右上角4个,右下角4个,左下角4个。

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

代码实例:border-radius: 15px

1、把下列代码添加进入你的<style>标签内

2、清空缓存,看看效果吧(部分IE版本可能不支持)

预览

总结

这是个很实用的方法,可以让图片看起来更「精巧」一些

border-radius:像素

CSS3里面 这个是圆角属性,但是最主流的IE浏览器都不认识,所以LZ还是放弃吧。

处理圆角一般采用两种方式

1、一个是PS切圆角,然后作为背景图片放到页面中。

2、第二个就是采用一个累计效果,也可以定义出圆角。

这里有个例子:http://zhidao.baidu.com/question/128969067.html

下面也有我的回答,LZ感兴趣可以研究研究,很简单。