cssli圆角,css3 圆角

http://www.itjxue.com  2023-01-07 19:36  来源:未知  点击次数: 

css圆角矩形的实现有多种方法,本例的方法是根据四个角的位置,将矩形横向上分为上

目前css3已经在各大浏览器中得到了友好的支持,请使用

border-radius:

如何用CSS做圆角

方法一:CSS3

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

meta http-equiv="Content-Language" content="utf-8" /

meta name="robots" content="all" /

meta name="author" content="Tencent-ISRD" /

meta name="Copyright" content="Tencent" /

titleBorder-radius/title

/head

body

div style="border-width: 1px;border-style: solid;-moz-border-radius: 11px;-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;padding:5px;"在Firefox和Safari 3的浏览器里能看到圆角效果/div

/body

/html

方法二:CSS2

先做好四个圆角背景图,再定义四个角的类,如:.TL .TR .BL .BR。 四个角使用绝对定位,定位在层的左上、右上、左下、右下位置。

用CSS实现圆角效果

第一种

html xmlns:v

head

style

v\:*{behavior: url(#default#VML);}

/style

/head

body

v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#e8e8e8" Filled="T" /

刷新本页才能看到效果

/body

/html

======================================

第二种

css圆角效果,IE6, firefox均显示正常

html

head

titlecss圆角效果--网站每日新/title

meta http-equiv="content-type" content="text/html; charset=gb2312"

style type="text/css"

div.RoundedCorner{background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

/style

/head

body

div class="RoundedCorner"

b class="rtop"b class="r1"/bb class="r2"/bb class="r3"/bb class="r4"/b/b

br无图片实现圆角框brbr

b class="rbottom"b class="r4"/bb class="r3"/bb class="r2"/bb class="r1"/b/b

/div

/body

/html

css里面这个圆角的效果是怎么做出来的?

这个可以先做个圆弧的图片,然后把这个图片设置为背景来实现,也可以使用css边框里的这个属性实现:border-radius。

css圆角背景切图做圆角

用Img标签插入网页呀。都没懂,你想表达什么意思?

你给图片做圆角不用自己切图呀。css可以支持圆角。

我觉得 你可以改变下问题得方式,

1,说出你想达到的效果,尽量截图。你说“是在一张图上面的(左中右)”,听了似乎真不知道想说什么。

2,怎么添加到网页中。 不明白你是不懂用img标签加入呢,还是可以加入到网页中,只是无法达到你的要求。

3,lispanspan急哦就急哦就/span/span/li。你大可以将代码以Html代码的形式,嵌入的问题里面。如

table

tr

tdinput?id="n"?name='a'?align="left"??class="numberbox"?type="text"/td

tdinput?id="m"?name='b'?align="left"??class="numberbox"?type="text"/td

/tr

/table

你光急没用呀,别人想帮助你都无从下手呀。

希望对你以后提问方面有所帮助。站在阅读者的角度看问题。

回答补充:

那你可以将做号的圆角图片切成3部分

第一部分包含左边的圆角,第二部分包含右边的圆角,第三部为长方形普通图片。最后用他们三个做背景图片,然后还是需要用CSS控制收缩,即两张角不变,内容长方形图片伸缩,来满足你的内容伸缩变化,如果还要适应上下伸缩,那解决方案是将每个角都切成图片。PS:你也可以PS成一张图片,包含几种内容,用background-image 的position属性设置显示哪部分。

希望对你有帮助!

css 怎么搞成li圆角

在bannerone_one li中加入下面的圆角属性。

border-top-left-radius:5px;

border-top-right-radius:5px;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

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

-webkit-border-top-right-radius:5px;

这些个css属性就ie6/7/8不支持,就像下面所说的,图片兼容最好!

(责任编辑:IT教学网)

更多