Html实现边框圆角的实例详解

问题：如何通过p+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  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  p id=p  p id=plefttop /p  p id=prighttop /p  p id=pleftbottom /p  p id=prightbottom /p  /body  /html 

注意：我的代码里用的css样式是内联式，CSSyangshi_10628_1.html' target='_blank'>CSS样式有三种：内联式，嵌入式，外部式。

【相关推荐】

1. HTML免费视频教程

2. html实现固定表格四周并且可以上下左右滚动

3. 详解前端开发常用的HTML标签

4. 通过marquee标签完成滚动效果的纯html代码

5. 用HTML编写个人简历的代码实例

以上就是Html实现边框圆角的实例详解的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。