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样式有三种:内联式,嵌入式,外部式。

  • 相关阅读:
    第四次实践作业
    第三次实践作业
    第二次实践作业
    第一次实践作业
    第02组 Beta版本演示
    第02组 Beta冲刺(4/4)
    大数据应用技术课程实践--选题与实践方案
    15 手写数字识别-小数据集
    14 深度学习-卷积
    13 垃圾邮件分类2
  • 原文地址:https://www.cnblogs.com/cyn941105/p/5588940.html
Copyright © 2011-2022 走看看