HTML+CSS实现圆角DIV

最新推荐文章于 2023-03-24 10:16:19 发布
最新推荐文章于 2023-03-24 10:16:19 发布
阅读量1k 收藏
点赞数
分类专栏： js

HTML+CSS实现圆角DIV

方法一：

原理就是在一个层上加二到三个层，不过这些层只有左右边线，最上和最下有背景色，然后它们都有长度差距，就这样了，以下是例子：

<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>

方法二：

<html> 
<head> 
<title>css圆角效果</title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
div.RoundedCorner{background: #9BD1FA} 
b.rtop, b.rbottom{display:block;background: #FFFFFF} 
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA} 
b.r1{margin: 0 5px} 
b.r2{margin: 0 3px} 
b.r3{margin: 0 2px} 
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} 
</style> 
</head> 
<body>

<div class="RoundedCorner"> 
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> 
<br>无图片实现圆角框<br><br> 
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> 
</div> 
</body> 
</html>

mengzhengjie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 怎么让他变成圆角,html让图片变圆角
weixin_30273263的博客
07-12 5425
很多时候在开发网页前端的时候，为了让网页上面的东西看起来更加的舒服，我们可能需要设置一些圆角的效果，比如圆形的头像、圆角的按钮等等。那么这些圆角效果是如何用css样式实现的，本章就给大家介绍css如何设置边框的圆角样式？border-radius属性设置边框的样式(图文)。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在css样式中有一个属性：border-radius属性是就常见...
HTML5提供了一些属性和样式来设计圆角边框，以下是一些常用的方法
BLOG域名:programb.blog.csdn.net
06-30 5110
请注意，虽然 HTML5 引入了更多的语义化标签和 API，但样式的定义仍然主要依赖于 CSS。在设计圆角边框时，你应该使用 CSS3 的这些属性，而不是 HTML5。在设计圆角边框时，请考虑整体设计的一致性、用户体验以及目标设备的特性。圆角可以帮助创造柔和的视觉效果，提升用户体验，但过度使用或不适当地使用可能会分散用户的注意力或导致设计显得过于复杂。HTML5 本身并不直接提供圆角边框的样式设计，这是由 CSS3 提供的。这些是设计圆角边框的一些常用方法，你可以根据需要选择适合的方法来实现。
CSS3 圆形进度条逻辑（两个半圆）
黄彪博客
04-09 1589
问题描述 最近再写大屏的项目，很多关于圆形进度条的效果，找出了一种思路，在这里做个记录，方便自己学习 逻辑思想 上图代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
html 圆角
weixin_73326146的博客
08-17 4707
html圆角
DIV设置圆角样式属性
小熊猫
03-24 3297
border-radius 所有四个边角 border-*-*-radius 属性的缩写。四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。border-bottom-right-radius 定义了右下角的弧度。border-bottom-left-radius 定义了左下角的弧度。border-top-right-radius 定义了右上角的弧度。border-top-left-radius 定义了左上角的弧度。
纯DIV+CSS实现圆角代码
09-25
标题中的“纯DIV+CSS实现圆角代码”指的是利用CSS样式来创建具有圆角效果的HTML元素，通常是指`div`元素。这种技术是CSS早期处理圆角的一种方法，但在CSS3引入`border-radius`属性之后，这种方法逐渐被淘汰，因为CSS...
div+css实现圆角即网页上常用的圆角效果
09-25
在网页中实现圆角的方法有很多，记得在一开始都是使用图片来实现的，而现在我们可以使用DIV+CSS来快速完成圆角的制作，需要的朋友可以参考下本
div+css制作圆角矩形的原理示例解读
09-25
本篇文章将深入解析如何通过div+CSS实现圆角矩形的原理，并提供一个示例来帮助读者理解。 首先，我们要明确CSS中并没有直接提供创建圆角的属性，但在CSS3中引入了`border-radius`属性，允许我们直接设置元素边框的...
使用Div+CSS纯图片实现圆角矩形的方法小结
09-24
主要介绍了使用Div+CSS纯图片实现圆角矩形的方法小结,CSS3中用代码绘制圆角矩形非常方便,而本文要介绍的则是利用图片来实现兼容性更强的方法,需要的朋友可以参考下
html圆角div,CSS3 圆角
weixin_35901475的博客
06-14 180
CSS3 圆角使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。CSS3 圆角制作器浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。属性border-radius9.05.04.0 -webkit-4.03.0 -moz-5.03.1 -webkit-10.5CSS3 border-...
html设置input圆角矩形_CSS+Jquery实现页面圆角框方法大全
weixin_42107165的博客
01-14 1681
所以我就想用一个既方便调用又方便更新的方法来实现，结果如愿以偿。先将此技术点总结如下：在此之前我也寻找过目前网络上最流行的做法的实现方案，大体共总结出7种方法，但是发现他们的方法多多少少都存在缺陷，后来我自己做出了我自己觉得满意的方法。先看目前网络上最流行的7种做法：１，无图片纯css圆角框收录理由：兼容性强，不用图形图一特点：1.不用任何图形，使用很多个div容器模拟出圆角效果。2.兼容性：通杀...
html中的圆角
weixin_34397291的博客
06-24 213
今天给大家讲一下html中的圆角，以及如何实现圆角。最早的时候，我们都是用图片，做一个圆角的图片，做成背景，或者在容器的角落里面应用一下这张图片，这么做很容易实现。随着时间的迁移，发现小图片太多了，增加浏览器发送的请求数量，又增加下载的数据量，而且大家都开始扁平化设计了。css3中有一些属性可以用来实现圆角，但是对IE6-8的支持不好，各种不同的浏览器也有自己的解释规则。/*...
html的div圆角
boresalad的专栏
10-10 403
1、ie7、ie8、ie9  谷歌浏览器兼容
纯CSS+DIV实现圆角的三种方法
GSE的成长之路
10-18 1510
 方法一：使用"•"来当圆角：  CodeCode highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
CSS3实现DIV圆角完整代码
过客的博客
04-30 677
border-radius: 20px; 圆形的实现 height：100px； width：100px； border-radius:50%； 转载自CSS3实现DIV圆角完整代码
html的圆角效果图,CSS3圆角的制作
weixin_35858450的博客
06-03 109
CSS3圆角技术能非常好的美化你的页面效果，而且避免了使用图片辅助，一则省去了制作图片的时间，二则省去了浏览器加载图片造成的延迟和带宽。如今，这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持，包括Safari，谷歌浏览器，IE，Opera和火狐浏览器。下面让我们来看看border-radius的语法，解释，以及IE是如何支持它的。语法和说明在CSS3中用来生成圆角效果的属性是borde...
html div 圆角边框,div圆角边框
weixin_34123811的博客
06-27 358
/p>Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">CSS测试器#xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}#xsnazzy h2 {font-size:2em;color:#06a; border:0;}...
html5 table 圆角
黄彪博客
09-07 9175
在工作中遇到这么一个问题 —— 美工画了一个表格，表格是使用圆角的。发现table这个标签画圆角很麻烦，因此使用了如下技术解决问题： 1、div 以 display : table;显示 2、border-radius: 10px 0px 0px 0px;顺序依次是 上 右 下 左 3、通过CSS3伪类查找，设置样式   .div_table{ display: table;} .
HTML 页面 DIV 边框圆角
热门推荐
10-27 2万+
div { border:1px solid #ccc; margin:2em auto 1em; max-width:650px; min-width:544px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; }
html5+css实现横向时间轴特效
最新发布
06-07
可以使用HTML5和CSS来实现横向时间轴特效，具体实现步骤如下： 1. 首先，使用HTML创建一个时间轴容器，其中包含一个无序列表（ul）和多个列表项（li），每个列表项表示一个时间节点。 2. 使用CSS设置时间轴容器的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值