广

HTML

  • HTML
  • CSS
  • XML/RSS
  • Dreamweaver
  • 位置:首页 > 学习 > 站长学习 > 网页制作 > HTML

    Html轻松实现圆角矩形

    2018-03-25 22:11:44 次阅读 稿源:互联网

    问题:如何通过div+css以及定位来实现圆角矩形?
     
    解决方法概述:
     
    内容:首先在

    标签内部里添加一个大层(大层用来固定整体大框架),然后大层内包含四个小层(四个小层里分别放四个圆角(事先用ps做好椭圆形形状,然后用切片工具切图 ))
     
    样式:在标签内部设置的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. nbsp;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样式有三种:内联式,嵌入式,外部式。

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告