藏宝游传奇

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 128|回复: 0

[网页制作] Html轻松实现圆角矩形

[复制链接]
  • TA的每日心情
    开心
    2020-12-29 20:57
  • 签到天数: 3 天

    [LV.2]圆转纯熟

    4332

    主题

    4336

    帖子

    26万

    积分

    超级版主

    Rank: 8Rank: 8

    积分
    262564
    发表于 2020-11-5 11:03:12 | 显示全部楼层 |阅读模式
    这篇文章主要为大家详细介绍了html轻松实现圆角矩形的方法,告诉大家如何通过div+css以及定位来实现圆角矩形?感兴趣的小伙伴们可以参考一下
    问题:如何通过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;(引入各个方向的圆角图片)
    以下是我实现圆角矩形的代码:
    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="Generator" content="EditPlus&#174;">
    6.   <meta name="Author" content="">
    7.   <meta name="Keywords" content="">
    8.   <meta name="Description" content="">
    9.   <title>圆角制作</title>
    10.   <style type=text/css>
    11.   #p
    12.   {
    13.   position:relative;
    14.   width:400px;
    15.   height:200px;
    16.   background:black;
    17.   margin:auto;
    18.   }
    19.   #plefttop
    20.   {
    21.   position:absolute;
    22.   width:50px;
    23.   height:50px;
    24. background:url("images/11.jpg") no-repeat;
    25.   }
    26.    #prighttop
    27.   {
    28.   position:absolute;
    29.   width:50px;
    30.   height:50px;
    31.   right:-9px;
    32.   top:0px;
    33.   background:url("images/22.jpg")  no-repeat;
    34.   }
    35.    #pleftbottom
    36.   {
    37.   position:absolute;
    38.   width:50px;
    39.   height:50px;
    40.   left:0px;
    41.   bottom:-14px;
    42.   background:url("images/33.jpg") no-repeat;
    43.   }
    44.   #prightbottom
    45.   {
    46.    position:absolute;
    47.   width:50px;
    48.   height:50px;
    49.   right:-9px;
    50.   bottom:-14px;
    51.   background:url("images/44.jpg") no-repeat;
    52.   }
    53.   </style>
    54. </head>
    55. <body>
    56. <div id=p>
    57. <div id=plefttop></div>
    58. <div id=prighttop></div>
    59. <div id=pleftbottom></div>
    60. <div id=prightbottom></div>
    61. </div>
    62. </body>
    63. </html>
    复制代码
    注意:我的代码里用的css样式是内联式,CSS样式有三种:内联式,嵌入式,外部式。
    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持藏宝游
    回复

    使用道具 举报

    Archiver|手机版|小黑屋|藏宝游

    GMT+8, 2021-9-28 09:52 , Processed in 0.039540 second(s), 27 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表