html边框圆角化代码_随笔

html边框圆角化可以用css中的“border-radius”属性来实现。

1、新建html文档，在body标签中添加一个div标签，然后为这个div标签设置边框，这时默认情况下边框是直角：

2、为div标签设置“border-radius”属性，属性值为圆角半径大小，这时边框的四个顶角都会变成圆角：

3、为div标签设置“border-radius”属性，属性值分别对应边框的左上角、右上角、右下角和左下角，这时可以对每个顶角自定义设置圆角半径：

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">

<head>

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

.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>

标题栏

</div>

内容页！

</div>

</div>

</body>

</html>

圆角在html5以前是不能用代码实现的，及时你用滤镜实现但是IE6不是很好支持滤镜，用代码实现很就是，复杂、麻烦、闲得慌，用图片实现是最好的，你用ps画一个你想要的圆角框作为div的背景，就O啦，备注，html5

ie8以下的版本不支持

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7029890.html

html边框圆角化代码

发表评论

评论列表（0条）