html实现圆角矩形

Posted 雅宁

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html实现圆角矩形相关的知识,希望对你有一定的参考价值。

问题:如何通过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;(引入各个方向的圆角图片)

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

<!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样式有三种:内联式,嵌入式,外部式。

以上是关于html实现圆角矩形的主要内容,如果未能解决你的问题,请参考以下文章

CSS样式怎么实现圆角矩形功能?

用纯CSS样式实现的网页中圆角矩形(css代码)

html实现圆角矩形

css圆角矩形的实现有多种方法,本例的方法是根据四个角的位置,将矩形横向上分为上

如何样用css做出圆角矩形

div+css如何实现圆角矩形