问题：如何通过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实现圆角矩形的更多相关文章

  1. [BOT] 一种android中实现“圆角矩形”的方法

    内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...

  2. 用贝赛尔曲线把图片， 按钮， label 绘成圆 或圆角矩形

    //创建圆形遮罩,把用户头像变成圆形 /* *CGPointMake(35, 35)  是绘图的中心点,  如果想把控件居中绘圆, 一般用控件的中心点,   radius 是圆半径   startAn ...

  3. RoundedImageView，实现圆形、圆角矩形的注意事项

    RoundedImageView是gitHub上面的一个开源组件(https://github.com/vinc3m1/RoundedImageView),实现一些圆形或者圆角矩形是很方便的, < ...

  4. swift UIImage加载远程图片和圆角矩形

    UIImage这个对象是swift中的图像类,可以使用UIImageView加载显示到View上. 以下是UIImage的构造函数: init(named name: String!) -> U ...

  5. iOS设置圆角矩形和阴影效果

    1.设置圆角矩形 //设置dropview属性 _dropView.backgroundColor=[[UIColor whiteColor] colorWithAlphaComponent:0.8] ...

  6. 如何在html中做圆角矩形和 只有右边的"分隔线"

    这个网站满好的,可以常看看 css-matic中有几个很好的写css可视化的工具 其实做css 版式布局等都可以有工具的 推荐40个优秀的免费CSS工具 debugger正则表达式在线 其实是对(理论 ...

  7. Android中实现圆角矩形及半透明效果。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们为了美观,有时候需要使用圆角矩形,或半透明之类的效果,在网页设计中很容易实现.但在Android开发中 ...

  8. Android圆角矩形创建工具RoundRect类

    用于把普通图片转换为圆角图像的工具类RoundRect类(复制即可使用): import android.content.Context; import android.graphics.Bitmap ...

  9. 解读Unity中的CG编写Shader系列四（unity中的圆角矩形shader）

    转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式 这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...

  10. Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .

    1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...

随机推荐

  1. 基于AdaBoost算法——世纪晟结合Haar-like特征训练人脸检测识别

      AdaBoost 算法是一种快速人脸检测算法,它将根据弱学习的反馈,适应性地调整假设的错误率,使在效率不降低的情况下,检测正确率得到了很大的提高.   系统在技术上的三个贡献: 1.用简单的Haa ...

  2. Python3 迭代器,生成器,装饰器

    1.迭代器 迭代器有两个基本方法,iter()和next(),next()完成后会引发StopIteration异常 a='abcdef' b=iter(a) #创建迭代器对象 print(type( ...

  3. Pandas dataframe数据写入文件和数据库

    转自:http://www.dcharm.com/?p=584 Pandas是Python下一个开源数据分析的库,它提供的数据结构DataFrame极大的简化了数据分析过程中一些繁琐操作,DataFr ...

  4. codeforces 359E Neatness（DFS+构造）

    Simon loves neatness. So before he goes to bed, Simon wants to complete all chores in the house. Sim ...

  5. POJ 2455 Secret Milking Machine（最大流+二分）

    Description Farmer John is constructing a new milking machine and wishes to keep it secret as long a ...

  6. Alpha版——版本控制报告（Thunder）

    Part One 回答问题: 0.在吹牛之前,先回答这个问题:如果你的团队来了一个新队员,有一台全新的机器,你们是否有一个文档,只要设置了相应的权限,她就可以根据文档,从头开始搭建环境,并成功地把最新 ...

  7. c# byte[] 保存图片

    1.用函数即可,File.WriteAllBytes(@"E:\123.bmp", pcBMPBuffer); 2.byte[]也可和image互相转化.

  8. 如何在html中把一个图片或者表格覆盖在一张已有图片上的任意位置

    如何在html中把一个图片或者表格覆盖在一张已有图片上的任意位置   <div style="position:relative;"> <img src=&quo ...

  9. com技术学习

    百度百科概念 COM是微软公司为了计算机工业的软件生产更加符合人类的行为方式开发的一种新的软件开发技术.在COM构架下,人们可以开发出各种各样的功能专一的组件,然后将它们按照需要组合起来,构成复杂的应 ...

  10. Cstring, TCHAR*, char*的转换

    最近老用到Cstring, TCHAR*, char*的转换. 找到一篇写得蛮详细的. 引用过来, 方便自己以后查阅. char是类型TCHAR也是!不过他可以通过是否定义了UNICODE宏来判断到底 ...