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实现圆角矩形的更多相关文章

[BOT] 一种android中实现“圆角矩形”的方法
内容简介文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...
用贝赛尔曲线把图片，按钮， label 绘成圆或圆角矩形
//创建圆形遮罩,把用户头像变成圆形 /* *CGPointMake(35, 35) 是绘图的中心点, 如果想把控件居中绘圆, 一般用控件的中心点, radius 是圆半径 startAn ...
RoundedImageView，实现圆形、圆角矩形的注意事项
RoundedImageView是gitHub上面的一个开源组件(https://github.com/vinc3m1/RoundedImageView),实现一些圆形或者圆角矩形是很方便的, < ...
swift UIImage加载远程图片和圆角矩形
UIImage这个对象是swift中的图像类,可以使用UIImageView加载显示到View上. 以下是UIImage的构造函数: init(named name: String!) -> U ...
iOS设置圆角矩形和阴影效果
1.设置圆角矩形 //设置dropview属性 _dropView.backgroundColor=[[UIColor whiteColor] colorWithAlphaComponent:0.8] ...
如何在html中做圆角矩形和只有右边的"分隔线"
这个网站满好的,可以常看看 css-matic中有几个很好的写css可视化的工具其实做css 版式布局等都可以有工具的推荐40个优秀的免费CSS工具 debugger正则表达式在线其实是对(理论 ...
Android圆角矩形创建工具RoundRect类
用于把普通图片转换为圆角图像的工具类RoundRect类(复制即可使用): import android.content.Context; import android.graphics.Bitmap ...
解读Unity中的CG编写Shader系列四（unity中的圆角矩形shader）
转自 http://www.itnose.net/detail/6097625.html 上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单的,但是又很常用的例子:把一张图片做 ...
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...

随机推荐

cenos环境变量配置
Beego环境搭建和bee工具安装使用,以Windows环境为例. 首先,下载并安装好GO并配置好GOROOT和GOPATH环境变量(如果您是用msi包安装的go,那么这些环境变量已经设置好了).并在 ...
Eclipse安装颜色主题，个性化你的IDE，让你的IDE焕然一新
我们都知道eclipse默认的颜色主题是白色的背景,但是如果想改变代码编辑区的背景颜色,需要怎么办呢? 今天给大家介绍一个非常赞的eclipse,可以很方便的根据自己的需求选择喜欢的颜色主题,其他的不 ...
ide的tomcat的部署和配置
关于intellij ide的tomcat的部署和配置 1.下载zip版的Tomcat 7,并解压.下载地址 2.在IDEA中配置Tomcat 7 在idea中的Settings(Ctrl+Alt ...
Graph Theory
Description Little Q loves playing with different kinds of graphs very much. One day he thought abou ...
Thunder团队——文案+美工
团队名称:Thunder 组长:王航成员:李传康.代秋彤.邹双黛.苗威.宋雨.胡佑蓉.杨梓瑞项目名称:爱阅app 需求概述: 现在市面上有很多手机阅读器,但是基本上不是收费就是广告满天飞.基于这种 ...
Alpha 冲刺（2/10）
队名火箭少男100 组长博客林燊大哥作业博客 Alpha 冲鸭鸭! 成员冲刺阶段情况林燊(组长) 过去两天完成了哪些任务协调各成员之间的工作协助前端界面的开发搭建测试用服务器的环境完成 ...
《软件工程实践》第五次作业-WordCount进阶需求（结对第二次）
在文章开头给出结对同学的博客链接.本作业博客的链接.你所Fork的同名仓库的Github项目地址本作业博客链接 github pair c 031602136魏璐炜博客 031602139徐明盛博客 ...
Spring中Controller和RequestMapping的详解
先看一个简单的实例: @Controller @RequestMapping("/hello") public class anyTypeController{ @RequestM ...
xpath教程三---逐层检索和全局检索
本节主要介绍用xpath来描述html的层级关系主要使用到的知识点如下: 单独的一个点 .,表示当前位置两个点 ..,表示上一级父标签的位置单独的一个斜杠 /,表示只检索下面一级单独的两个斜杠 ...
Linux服务器记录并查询历史操作记录
Linux服务器在使用过程中,经常会有除自己之外的其他人员使用.并不是每个人都对Linux服务器特别熟悉,难免会有一些操作导致服务器报错. 因此,监控Linux服务器的操作并记录下来,是非常有必要的! ...

html实现圆角矩形

html实现圆角矩形的更多相关文章

随机推荐

热门专题