• 企业400电话
  • 网络优化推广
  • AI电话机器人
  • 呼叫中心

    • 全 部 栏 目

    网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Html轻松实现圆角矩形
    POST TIME:2021-10-16 22:59

    问题：如何通过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;(引入各个方向的圆角图片)
     
    以下是我实现圆角矩形的代码：

    XML/HTML Code复制内容到剪贴板
    1. <!doctype html>  
    2.   
    3. <html lang="en">    
    4.   
    5.  <head>  
    6.   
    7.   <meta charset="UTF-8">  
    8.   
    9.   <meta name="Generator" content="EditPlus®">  
    10.   
    11.   <meta name="Author" content="">  
    12.   
    13.   <meta name="Keywords" content="">  
    14.   
    15.   <meta name="Description" content="">  
    16.   
    17.   <title>圆角制作</title>  
    18.   
    19.   <style type=text/css>  
    20.   
    21.   #p   
    22.   
    23.     
    24.   
    25.   {   
    26.   
    27.   position:relative;   
    28.   
    29.   width:400px;   
    30.   
    31.   height:200px;   
    32.   
    33.   background:black;   
    34.   
    35.   margin:auto;   
    36.   
    37.   }   
    38.   
    39.   #plefttop   
    40.   
    41.   {    
    42.   
    43.   position:absolute;   
    44.   
    45.   width:50px;   
    46.   
    47.   height:50px;    
    48.   
    49.  background:url("images/11.jpg") no-repeat;   
    50.   
    51.   }   
    52.   
    53.    #prighttop    
    54.   
    55.   {   
    56.   
    57.   position:absolute;   
    58.   
    59.   width:50px;   
    60.   
    61.   height:50px;   
    62.   
    63.   right:-9px;   
    64.   
    65.   top:0px;    
    66.   
    67.   background:url("images/22.jpg")  no-repeat;   
    68.   
    69.   }   
    70.   
    71.    #pleftbottom   
    72.   
    73.   {   
    74.   
    75.   position:absolute;   
    76.   
    77.   width:50px;   
    78.   
    79.   height:50px;   
    80.   
    81.   left:0px;   
    82.   
    83.   bottom:-14px;   
    84.   
    85.   background:url("images/33.jpg") no-repeat;   
    86.   
    87.   }   
    88.   
    89.   #prightbottom   
    90.   
    91.   {   
    92.   
    93.    position:absolute;   
    94.   
    95.   width:50px;   
    96.   
    97.   height:50px;   
    98.   
    99.   right:-9px;   
    100.   
    101.   bottom:-14px;   
    102.   
    103.   background:url("images/44.jpg") no-repeat;   
    104.   
    105.   }   
    106.   
    107.   </style>  
    108.   
    109.  </head>  
    110.   
    111.  <body>  
    112.   
    113. <div id=p>  
    114.   
    115. <div id=plefttop></div>  
    116.   
    117. <div id=prighttop></div>  
    118.   
    119. <div id=pleftbottom></div>  
    120.   
    121. <div id=prightbottom></div>  
    122.   
    123. </div>  
    124.   
    125. </body>  
    126.   
    127. </html>    
    128.   

    注意：我的代码里用的css样式是内联式，CSS样式有三种：内联式，嵌入式，外部式。

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

    原文链接：http://www.cnblogs.com/cyn941105/p/5588940.html

    上一篇：如何固定表格四周实现表格上下左右滚动
    下一篇：Web端的邮件内容HTML格式规范总结
  • 相关文章
    • 

    关于我们 | 付款方式 | 荣誉资质 | 业务提交 | 代理合作


    © 2016-2020 巨人网络通讯

    时间：9:00-21:00 (节假日不休)

    地址：江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    X

    截屏，微信识别二维码

    微信号：veteran88

    （点击微信号复制，添加好友）

     打开微信