zoukankan      html  css  js  c++  java
  • 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样式有三种:内联式,嵌入式,外部式。

  • 相关阅读:
    11. Container With Most Water
    9. Palindrome Number
    375. 猜数字大小 II leetcode java
    leetcode 72 编辑距离 JAVA
    73. 矩阵置零 leetcode JAVA
    快速排序 JAVA实现
    63. 不同路径 II leetcode JAVA
    重写(override)与重载(overload)
    62 不同路径 leetcode JAVA
    leetcode 56 合并区间 JAVA
  • 原文地址:https://www.cnblogs.com/cyn941105/p/5588940.html
Copyright © 2011-2022 走看看