Html轻松实现圆角矩形

ttx9n · 发表于 2016-6-17 10:13:16

这篇文章主要为大家详细介绍了html轻松实现圆角矩形的方法，告诉大家如何通过div+css以及定位来实现圆角矩形？感兴趣的小伙伴们可以参考一下

问题：如何通过div+css以及定位来实现圆角矩形？

解决方法概述：

内容：首先在<body>标签内部里添加一个大层（大层用来固定整体大框架），然后大层内包含四个小层（四个小层里分别放四个圆角（事先用ps做好椭圆形形状，然后用切片工具切图））

样式：在<head>标签内部设置的css要有的属性：

1.position：relative；

2.宽和高;

3背景颜色;

4.边框线（用来调整四个原角的相对位置，调整好后可以将边框线设置删除）

在设置小层的css时，每个层里都要有的属性有：

1.position：absolute；

2.宽和高；

3.方向属性（left，right，bottom,top）

4.background：url（""）no-repeat;(引入各个方向的圆角图片)

以下是我实现圆角矩形的代码：

XML/HTML Code复制内容到剪贴板

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>圆角制作</title>
<style type=text/css>
#p
{
position:relative;
width:400px;
height:200px;
background:black;
margin:auto;
}
#plefttop
{
position:absolute;
width:50px;
height:50px;
background:url("images/11.jpg") no-repeat;
}
#prighttop
{
position:absolute;
width:50px;
height:50px;
right:-9px;
top:0px;
background:url("images/22.jpg") no-repeat;
}
#pleftbottom
{
position:absolute;
width:50px;
height:50px;
left:0px;
bottom:-14px;
background:url("images/33.jpg") no-repeat;
}
#prightbottom
{
position:absolute;
width:50px;
height:50px;
right:-9px;
bottom:-14px;
background:url("images/44.jpg") no-repeat;
}
</style>
</head>
<body>
<div id=p>
<div id=plefttop></div>
<div id=prighttop></div>
<div id=pleftbottom></div>
<div id=prightbottom></div>
</div>
</body>
</html>

注意：我的代码里用的css样式是内联式，CSS样式有三种：内联式，嵌入式，外部式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

原文链接：http://www.cnblogs.com/cyn941105/p/5588940.html

plvo189 · 发表于 2022-8-26 09:23:41

hi哦和烦恼农家女

95nd4ba · 发表于 2022-10-12 00:20:19

管灌灌灌灌灌灌灌灌灌灌

u7yxn9 · 发表于 2023-4-3 18:13:46

感谢楼主分享

sykzus · 发表于 2023-5-8 16:23:40

这个源码还可以

雪龙Ui79 · 发表于 2023-7-6 08:35:20

好人好人好人好人

kwa3hgmjp · 发表于 2023-9-9 01:30:05

2222222222222222

gc4hg · 发表于 2023-11-9 08:47:09

老衲笑纳了

8ayoqrpj · 发表于 2023-12-7 17:22:42

看看看咋么

adm1n · 发表于 2024-1-20 02:08:30

66666666666

账号		自动登录	找回密码
密码			立即注册

[HTML/Xhtml] Html轻松实现圆角矩形

相关帖子