div如何设置圆角图形?

div如何设置圆角图形?,第1张

div用CSS设定圆角的话,只有一个属性border-radius,但是该属性IE8都不能支持,只能在firefox、chorme等浏览器中看到。如果想在IE8或以下的浏览器中看到,只能找js代码实现。

有人写过专门的做圆角用的js代码,你可以搜搜看,印象中做成了corner函数,直接调用即可。

Div切圆角的实现原理:

1,首先使用P标签,第一行距Div的边距为一个数值(假设为3px);

2,第二个p标签在第一个的下一行,距Div的边距为第一行的减去一个像素数值(假设为2px);

3,依次实现,直到最后一个p标签的值为1px;

4,第一行全显示,后面的只显示两头的一个像素即可。

5,再配合中间的DIV显示两头的线框,即可实现

实现代码:

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html

charset=gb2312"

/>

<title>Div圆角实现</title>

<style

type="text/css">

.one

{

display:block

overflow:hidden

height:1px

margin:0

4px

border-left:1px

solid

#B2D0EA

border-right:1px

solid

#B2D0EA

background:#B2D0EA

}

.two

{

display:block

overflow:hidden

height:1px/*线的高度为1px*/

margin:0

3px/*距离外层DIV的左右边距各3px*/

border-left:1px

solid

#B2D0EA/*只显示线的左边的1px*/

border-right:1px

solid

#B2D0EA/*只显示线的右边的1px*/

background:#B2D0EA/*配合内层Div的颜色变化,*/

}

.three

{

display:block

overflow:hidden

height:1px

margin:0

2px

border-left:1px

solid

#B2D0EA

border-right:1px

solid

#B2D0EA

background:#EDF7FF

}

.four

{

display:block

overflow:hidden

height:1px

margin:0

1px

border-left:1px

solid

#B2D0EA

border-right:1px

solid

#B2D0EA

background:#EDF7FF

}

.rou/*DIV只显示左右的边框,颜色和p标签的一致*/

{

border-left:1px

solid

#B2D0EA

border-right:1px

solid

#B2D0EA

}

.rou2

{

border-left:1px

solid

#B2D0EA

border-right:1px

solid

#B2D0EA

background:#EDF7FF

}

</style>

<!--Div切圆角的实现原理:

1,首先使用P标签,第一行距Div的边距为一个数值(假设为3px);

2,第二个p标签在第一个的下一行,距Div的边距为第一行的减去一个像素数值(假设为2px);

3,依次实现,直到最后一个p标签的值为1px;

4,第一行全显示,后面的只显示两头的一个像素即可。

5,再配合中间的DIV显示两头的线框,即可实现

-->

</head>

<body>

<div>

<!--<p

class="one"></p>-->

<p

class="two"></p>

<p

class="three"></p>

<p

class="four"></p>

<div

class="rou2">

标题栏

</div>

<div

class="rou">

内容页!

</div>

<p

class="four"></p>

<p

class="three"></p>

<p

class="two"></p>

<!--<p

class="one"></p>-->

</div>

</body>

</html>

我个人觉得最简单的还是用背景,用两张背景重叠,那HTML代码也会少点,比如:

一个要做圆角的DIV,设ID为bg

<divid="bg">

<divid="bg_left"></div>

</div>

让ID为bg的做个背景,背景向右对齐,向左延伸。

然后让ID为bg_left的浮动在左边,宽度BG的。

bg_left的背景就是左边的圆角向右延伸,但宽度小于bg,bg的背景就是右圆角向左延伸,如不用做透明的话,宽度多少就无所谓了,当然,方向也可以反过来,让bg_left这个框float在右边。。。

明白我的意思吗?呵呵。。。

我的就是这样做的,http://www.dafi.cn

自己另存源码来看。。。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11611438.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存