• 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;
      400px;
    
      height:200px;
    
      background:black;
    
      margin:auto;
      }
    
      #plefttop
    
      {
    
      position:absolute;
      50px;
    
      height:50px;
    
     background:url("images/11.jpg") no-repeat;
      }
    
       #prighttop
    
      {
    
       position:absolute;
      50px;
    
      height:50px;
    
      right:-9px;
    
      top:0px;
    
      background:url("images/22.jpg")  no-repeat;
      }
    
       #pleftbottom
    
      {
    
      position:absolute;
      50px;
    
      height:50px;
    
      left:0px;
    
      bottom:-14px;
    
      background:url("images/33.jpg") no-repeat;
      }
    
      #prightbottom
    
      {
    
      position:absolute;
      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样式有三种:内联式,嵌入式,外部式。

  • 相关阅读:
    IIS和ASP.NET2.0
    VS.NET里关于不能够使用向导的问题
    CodeFile
    判断一个字符串是否全是数字的多种方法及其性能比较(C#实现)
    托管和非托管资源
    ASP.NET 2.0页面框架的几处变化
    导出QQWry.Dat中IP地址到文件[C#]
    面向对象在数据库应用程序中的应用(dotNet)
    如何取得IP/用户名等信息
    验证Email是否真正存在(上)
  • 原文地址:https://www.cnblogs.com/cyn941105/p/5588940.html
Copyright © 2020-2023  润新知