首頁 > web前端 > html教學 > html实现圆角矩形

html实现圆角矩形

WBOY
發布: 2016-06-16 08:39:26
原創
3609 人瀏覽過

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

解决方法概述:

内容:首先在

标签内部里添加一个大层(大层用来固定整体大框架),然后大层内包含四个小层(四个小层里分别放四个圆角(事先用ps做好椭圆形形状,然后用切片工具切图 ))

样式:在

标签内部设置的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&reg;">

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板