cssli圆角,css3 圆角
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不支持,就像下面所说的,图片兼容最好!