问题：如何通过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. jQuery 调用后台方法（net）

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...

  2. Python中对变量是否为None的判断

    三种主要的写法有: 第一种:if X is None; 第二种:if not X: 当X为None,  False, 空字符串"", 0, 空列表[], 空字典{}, 空元组()这 ...

  3. 原生js实现自定义alert风格和实现

    2018年6月29 最新更新 添加函数节流,解决多次点击问题,添加单例模式,提高代码性能. <!DOCTYPE html> <html lang="en"> ...

  4. 【Docker 命令】- inspect命令

    docker inspect : 获取容器/镜像的元数据. 语法 docker inspect [OPTIONS] NAME|ID [NAME|ID...] OPTIONS说明: -f :指定返回值的 ...

  5. .NET环境下，通过LINQ操作SQLite数据库

    //对应数据库中的某个表 [Table(Name = "main.Student")]    public class Student    {        [Column(Na ...

  6. delphi鼠标状态

    Screen.Cursor := crNo;

  7. BZOJ 1025 游戏(分组背包)

    题目所谓的序列长度实际上就是各循环节的lcm+1. 所以题目等价于求出 一串数之和等于n,这串数的lcm种数. 由唯一分解定理可以联想到只要把每个素数的幂次放在一个分组里,然后对整体做一遍分组背包就行 ...

  8. linux虚拟机磁盘扩展与分区大小调整

    有段时间觉得linux虚拟机上的磁盘不太够用,研究了下其磁盘扩展 1.linux虚拟机磁盘扩展 step1. 先关机在编辑虚拟机中,找到硬盘选项增加空间,进行扩展step2. 进入root fdisk ...

  9. （转）Ubuntu 12.04 LTS安装VMware Tools实现linux和window 互相复制：无法找到kernel header path的问题

    Ubuntu 12.04 LTS安装VMware Tools无法找到kernel header path的问题   ubuntuvmware Ubuntu 12.04 安装 VMware Tools, ...

  10. CentOS 文件隐藏属性

    1.chattr用于配置文件的隐藏属性 语法: chattr [-RVf] [-+=aAcCdDeijsStTu] [-v version] files... 选项与参数: +:增加某个特殊参数,其他 ...