问题:如何通过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. NSValue的valueWithBytes:objCType:方法

    + (NSValue *)valueWithBytes:(const void *)value objCType:(const char *)type; NSValue的valueWithBytes: ...

  2. java通过控制鼠标实现屏幕广播

    在java实现屏幕共享的小程序中提到截取屏幕时是没鼠标,为了看到教师端界面上的鼠标,可以在截取屏幕的时候,把鼠标绘制到每一张截图上去,但是由于截图的时候是一张张截取的,所以看到的鼠标难免会有点卡,之前 ...

  3. JavaScript初探系列之日期对象

    时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.它是一个内置对象——而不是其它对象的属性,允许用户执行各种使用日期和时间的过程. 一   Date 日期对象 ...

  4. 利用Vue v-model实现一个自定义的表单组件

    原文请点此链接  http://blog.csdn.net/yangbingbinga/article/details/61915038

  5. perf record -c

    如果perf record -c -c后面接的是sample_period,也就是说你让这个事件没 我的loop进程一直在执行,我的CPU的频率是2.6G hz,也就是说每一秒会有2,600,000, ...

  6. tomcat 相关

    servlet.xml 文件: 1 . 修改端口号,找到如下标签,port 属性就是端口号,修改之后重启服务器即可, <Connector connectionTimeout="200 ...

  7. Activiti5工作流笔记二

    流程变量 import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; import org.activiti ...

  8. BZOJ 1305 跳舞(二分+网络流)

    无法直接构造最大流来解决这个问题,因为题目要求每首舞曲都需要n对男女进行跳舞. 答案又满足单调性,这启发我们二分答案,判断是否满流验证答案. 假设舞曲数目为x时满足条件,那么每个男生和女生都需要跳x次 ...

  9. BZOJ4700 适者(贪心+cdq分治+斜率优化)

    首先考虑怎么安排攻击顺序.显然如果攻击了某台兵器就应该一直连续攻击直到将其破坏,破坏所需时间可以直接算出来,设其为b.假设确定了某个破坏顺序,如果交换相邻两个兵器,显然不会对其他兵器造成影响,两种顺序 ...

  10. 在git 服务器挂载、创建新的项目、克隆新的项目

     流程,服务器创建项目名-->客户端克隆-->客户端提交并且推送-->完成   详细步骤   1.在git服务器路径文件夹下创建空文件夹,名字为新的项目名,如在  F:\git   ...