纯CSS+DIV实现圆角的三种方法

最新推荐文章于 2023-03-24 10:16:19 发布
最新推荐文章于 2023-03-24 10:16:19 发布
阅读量1.4k 收藏 2
点赞数
文章标签： css div up
 

方法一：使用"•"来当圆角：

 

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>

    <script type="text/javascript">
      function doResize()
      {
           document.getElementById("box-contents").style.height=(document.documentElement.clientHeight-60)+"px";
      }
      window.onresize = doResize;
    </script>

    <style type="text/css">
        body
        {
            background-color: black;
            margin: 0px;
            padding: 0px;
            color: White;
            font: 16px arial;
        }
        #content
        {
            margin: auto;
            width: 780px;
            height: 100%;
            padding: 0 0;
        }
        div.rounded-box
        {
            position: relative;
            background-color: red;
            margin: 3px;
            width: 780px;
            padding: 0 0;
        }
        /********************* 
GLOBAL ATTRIBUTES 
*********************/div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
        {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: black;
            overflow: hidden;
        }
        div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside
        {
            position: relative;
            font-size: 150px;
            font-family: arial;
            color: red;
            line-height: 40px;
        }
        /********************* 
SPECIFIC ATTRIBUTES 
*********************/div.top-left-corner
        {
            top: 0px;
            left: 0px;
        }
        div.bottom-left-corner
        {
            bottom: 0px;
            left: 0px;
        }
        div.top-right-corner
        {
            top: 0px;
            right: 0px;
        }
        div.bottom-right-corner
        {
            bottom: 0px;
            right: 0px;
        }
        div.top-left-inside
        {
            left: -8px;
        }
        div.bottom-left-inside
        {
            left: -8px;
            top: -17px;
        }
        div.top-right-inside
        {
            left: -25px;
        }
        div.bottom-right-inside
        {
            left: -25px;
            top: -17px;
        }
        div.box-contents
        {
            position: relative;
            padding: 8px;
            color: white;
        }
    </style>
</head>
<body onload="doResize();">
    <div id="content">
        <span>Header</span>
        <div class="rounded-box">
            <div class="top-left-corner">
                <div class="top-left-inside">
                    •</div>
            </div>
            <div class="bottom-left-corner">
                <div class="bottom-left-inside">
                    •</div>
            </div>
            <div class="top-right-corner">
                <div class="top-right-inside">
                    •</div>
            </div>
            <div class="bottom-right-corner">
                <div class="bottom-right-inside">
                    •</div>
            </div>
            <div class="box-contents" id="box-contents">
                Contents go here, but it must be at least two lines to look any good.
                <br>
                Contents go here, but it must be at least two lines to look any good.
                <br>
                Contents go here, but it must be at least two lines to look any good.
                <br>
            </div>
            <!-- end div.box-contents -->
        </div>
        <!-- end div.rounded-box -->
        <span>Footer</span>
    </div>
</body>
</html>

 

方法二：

来自：http://www.cnblogs.com/scgw/articles/927682.html

 

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        u.corner u
        {
            height: 1px;
            font-size: 1px;
            display: block;
            overflow: hidden; /*author: meizz*/
            text-decoration: none;
            background-color: green;
        }
        u.corner u.h1
        {
            margin: 0 5px;
        }
        u.corner u.h2
        {
            margin: 0 3px;
        }
        u.corner u.h3
        {
            margin: 0 2px;
        }
        u.corner u.h4
        {
            margin: 0 1px;
            height: 2px;
        }
    </style>
    <head>
        <body>
            <div>
                <u class="corner"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4">
                </u></u>
                <div style="background-color: green; height: 200">
                    content</div>
                <u class="corner"><u class="h4"></u><u class="h3"></u><u class="h2"></u><u class="h1">
                </u></u>
            </div>
        </body>
</html>

 

 

方法三：

 

来自：http://www.cnblogs.com/pointdeng/articles/1171323.html

 

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>无标题页</title>
    <style>
        .up1
        {
            overflow: hidden;
            height: 1px;
            margin-left: 4px;
            margin-right: 4px;
            background-color: Aqua;
            border-left: solid 1px Aqua;
            border-right: solid 1px Aqua;
        }
        .up2
        {
            overflow: hidden;
            height: 1px;
            margin-left: 3px;
            margin-right: 3px;
            border-left: solid 1px Aqua;
            border-right: solid 1px Aqua;
        }
        .up3
        {
            overflow: hidden;
            height: 1px;
            margin-left: 2px;
            margin-right: 2px;
            border-left: solid 1px Aqua;
            border-right: solid 1px Aqua;
        }
        .content
        {
            margin-left: 1px;
            margin-right: 1px;
            height: 100px; /*这里控件高度*/ /*background-color: Aqua;*/
            border-left: solid 1px Aqua;
            border-right: solid 1px Aqua;
        }
        .down1
        {
            overflow: hidden;
            height: 1px;
            margin-left: 2px;
            margin-right: 2px;
            border-left: solid 1px Aqua;
            border-right: solid 1px Aqua;
        }
        .down2
        {
            overflow: hidden;
            height: 1px;
            margin-left: 3px;
            margin-right: 3px;
            border-left: solid 1px Aqua;
            border-right: solid 1px Aqua;
        }
        .down3
        {
            overflow: hidden;
            height: 1px;
            margin-left: 4px;
            margin-right: 4px;
            background-color: Aqua;
            border-left: solid 1px Aqua;
            border-right: solid 1px Aqua;
        }
        .cell
        {
            width: 50px; /*这里控制宽度*/
        }
    </style>
</head>
<body>
    <div class="cell">
        <div class="up1">
        </div>
        <div class="up2">
        </div>
        <div class="up3">
        </div>
        <div class="content">
            这里放内容
        </div>
        <div class="down1">
        </div>
        <div class="down2">
        </div>
        <div class="down3">
        </div>
    </div>
</body>
</html>

 

原文地址：http://www.cnblogs.com/blodfox777/archive/2008/09/02/1282141.html


IMAGSE
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Div+CSS纯图片实现圆角矩形的方法小结
09-24
主要介绍了使用Div+CSS纯图片实现圆角矩形的方法小结,CSS3中用代码绘制圆角矩形非常方便,而本文要介绍的则是利用图片来实现兼容性更强的方法,需要的朋友可以参考下
CSS3如何实现DIV圆角边框
weixin_46388225的博客
02-23 1万+
#CSS3如何实现DIV圆角边框 在进行页面布局时，DIV边框默认是矩形边框，想让边框为圆角时，可以用CSS3的border-radius这一属性来实现。 例如：想让div盒子边框四个角都为半径为10px的圆角时具体代码如下： 效果图： 下面对border-radius具体细节进行介绍： 语法：border-radius: 1-4 length|% / 1-4 length|%; 注释：按此顺...
CSS的圆角属性（border-radius）
qq_45799465的博客
01-25 5558
圆角属性在前端的应用范围较广，在高级感的塑形上必不可少。下面就跟我一起了解圆角属性的具体语法、应用、及注意事项。 切正圆 正圆 border-radius:20px; 一个值代表4个半径都是20px的正圆 border-radius:20px 40px; 两个值代表左上右下是20px，右上左下是40px的正圆 border-radius:20px 40px 60px; 三个值代表左上20px，右上和左下是40px，右下是60px的正圆 border-radiu...
css设置div圆角
热门推荐
16个夏天。。。
12-16 2万+
昨天去面试，面试官一上来就开始问技术方面的问题，感觉很糟糕，很多知识点只记得大概，其中面试官提到怎么设置div文圆角，当时我就蒙了，虽然我是做后台的，之前听过说把按钮设置成圆角，但那都是前台的处理，也没多个心眼百度，哎！现在吃亏了。 CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用
DIV设置圆角样式属性
小熊猫
03-24 3027
border-radius 所有四个边角 border-*-*-radius 属性的缩写。四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。border-bottom-right-radius 定义了右下角的弧度。border-bottom-left-radius 定义了左下角的弧度。border-top-right-radius 定义了右上角的弧度。border-top-left-radius 定义了左上角的弧度。
div css3 border-radius 之圆角 div圆角 图片圆角
徊忆羽菲
01-07 1493
div css3 border-radius 之圆角 div圆角 图片圆角CSS 圆角CSS border-radius 属性1、带有指定背景颜色的元素的圆角：2、带边框元素的圆角：3、带有背景图像的元素的圆角：提示CSS border-radius - 指定每个角 CSS 圆角 通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。 CSS border-radius 属性 CSS border-radius 属性定义元素角的半径。 提示：您可以使用此属性为元素添加圆角！ 1、带
纯DIV+CSS实现圆角代码
09-25
用css实现的圆角实现代码，大家可以学习使用，不建议使用。不如用图片，兼容性会比这个好点。
div+css实现圆角即网页上常用的圆角效果
09-25
在网页中实现圆角的方法有很多，记得在一开始都是使用图片来实现的，而现在我们可以使用DIV+CSS来快速完成圆角的制作，需要的朋友可以参考下本
css 实现内凹圆角
frame的专栏
08-03 1万+
上图： 我们经常会去实现那种圆角的按钮，图片等等，但是想要实现这种内凹的圆角形状的块状还是比较复杂，我先讲讲思路： 第一，需要一个大块进行包裹，需要设置宽度和高度等； 第二，需要四个小块，来使用圆角的属性border-radius，进行不同方向的圆角设置； 第三，为这些块加上border属性。 代码如下： &...
CSS中如何设置盒子边框的圆角和阴影
y1059477028的博客
10-14 1957
第一个值：水平偏移量 正->左 负->右 ，必选；第二个值：垂直偏移量 正->下 负->上 ，必选；如果盒子的宽和高相等，那么可将border-radius：50%，即可设置圆形。第四个值：颜色 默认是黑色，可选。第三个值：模糊半径 默认0px，可选；，用来设置元素的阴影效果，不会影响到页面布局。盒子阴影后面可跟1-4个数值，意义分别如下。
css 利用径向渐变 画反向圆角：
sunny_day的博客
08-06 2379
径向渐变：指从一个中心点开始沿着四周产生渐变效果。 语法： background:radial-gradient(shapesizeatposition,start-color,...,color[stop]...,last-color); 参数说明： shape：渐变的形状。 如果元素宽高相同为正方形，则ellipse和circle显示一样； 如果元素宽高不相同，默...
【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-20 4588
一、盒子模型圆角边框 二、代码示例 1、代码示例 - 正常矩形边框 2、代码示例 - 圆形边框 3、代码示例 - 圆角矩形边框 4、代码示例 - 综合对比示例
反向css圆角矩形:
Lvy2011的专栏
04-18 1805
.serif {}{   background: transparent; width:40%;   } .serif h1, .serif p {}{   margin:0 10px;   } .serif h1 {}{   font-size:2em; color:#fff;   } .serif p {
CSS实现反方向圆角
weixin_34318326的博客
10-12 4740
原理 父级元素 relative，子元素 absolute，然后通过top、left、right、bottom来设置具体出现位置。 DOM结构 <div class="wrapper-dashed"> <div class="dashed"></div> </div> CSS样式...
css 实现倒三角圆角
JasonAlonk的博客
04-02 506
使用条纹背景实现 width: 37px; height: 29px; background: linear-gradient(-41deg, transparent 53%, #61C4CF -33%); background-size: 51px 29px; border-radius: 0 0 0px 5px;
CSS3中的基础（圆角，边框背景，过渡）
m0_68169119的博客
07-21 526
css3的概要
怎样使用css让矩形出现圆角,CSS中设置元素的圆角矩形
weixin_33664286的博客
08-03 4222
圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形。border-radius属性值一共有4个，左上、右上、左下、右下。border-radius属性值规则如下：第一个值为左上、第二个值为右上、第三个值为左下、第四个值为右下。假如border-radius属性值都是一致的我可以设置一个属性值即可。圆角矩形实践圆角矩形基本使用方式圆角矩形div{width: 100px;...
html中如何倒圆角,html – 在CSS中颠倒圆角？
weixin_39623620的博客
06-21 604
只是为了更新这个，似乎你可以在多种方式。使用边框图像html cssdiv {width: 200px;border-width: 55px;-moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;-webkit-border-image: url(http://i47.tinypic.com/2qxba03.png...
【css】反向圆角
夜雨Gecer的博客
07-19 4237
效果类似于谷歌浏览器的tab，如图： nav的结构代码（数据类型就是普通的list就不在这里赘述了）： <nav> <div :class="{ 'menu-item': true, 'activity': index == selectMenuIndex }" v-for="(menuInfo,index) in menuList" :key="index" @click="handelMenuClick(index)"
css 设置div圆角
最新发布
06-13
你可以使用 CSS 的 border-radius 属性来设置 div 元素的圆角。例如，如果你想让一个 div 元素的四个角都是圆角，可以这样写： ```css div { border-radius: 10px; } ``` 如果你想只让一个 div 元素的左上角和右下角为圆角，可以这样写： ```css div { border-top-left-radius: 10px; border-bottom-right-radius: 10px; } ``` 你也可以分别设置四个角的圆角大小，例如： ```css div { border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px; } ``` 这样的话，左上角的圆角半径为 10px，右上角的圆角半径为 20px，右下角的圆角半径为 30px，左下角的圆角半径为 40px。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值