div+css 画圆角矩形

最新推荐文章于 2024-02-24 21:40:11 发布
最新推荐文章于 2024-02-24 21:40:11 发布
阅读量2.1k 收藏
点赞数 1
文章标签： div css class up html 百度

<html> 
<head> 
<title>div+css制作圆角矩形</title> 
<mce:style><!--  
body  
{  
background:white;  
}  
#main  
{  
margin:0 20%;  
background:red;  
}  
.up  
{  
background:white;  
}  
.up div  
{  
height:1px;  
overflow:hidden;  
background:red;  
}  
.r1{margin:0 6px;}  
.r2{margin:0 4px;}  
.r3{margin:0 3px;}  
.r4{margin:0 2px;}  
.r5{margin:0 1px;height:5px；}  
--></mce:style><style mce_bogus="1">body  
{  
background:white;  
}  
#main  
{  
margin:0 20%;  
background:red;  
}  
.up  
{  
background:white;  
}  
.up div  
{  
height:1px;  
overflow:hidden;  
background:red;  
}  
.r1{margin:0 6px;}  
.r2{margin:0 4px;}  
.r3{margin:0 3px;}  
.r4{margin:0 2px;}  
.r5{margin:0 1px;height:5px；}</style> 
</head> 
<body> 
<div id="main"> 
<div class="up"> 
<div class="r1"></div> 
<div class="r2"></div> 
<div class="r3"></div> 
<div class="r4"></div> 
<div class="r5"></div> 
</div> 
内容<br> 
内容<br> 
内容<br> 
内容<br> 
<div class="up"> 
<div class="r5"></div> 
<div class="r4"></div> 
<div class="r3"></div> 
<div class="r2"></div> 
<div class="r1"></div> 
</div> 
</div> 
</body> 
</html> 
<html>
<head>
<title>div+css制作圆角矩形</title>
<mce:style><!--
body
{
background:white;
}
#main
{
margin:0 20%;
background:red;
}
.up
{
background:white;
}
.up div
{
height:1px;
overflow:hidden;
background:red;
}
.r1{margin:0 6px;}
.r2{margin:0 4px;}
.r3{margin:0 3px;}
.r4{margin:0 2px;}
.r5{margin:0 1px;height:5px；}
--></mce:style><style mce_bogus="1">body
{
background:white;
}
#main
{
margin:0 20%;
background:red;
}
.up
{
background:white;
}
.up div
{
height:1px;
overflow:hidden;
background:red;
}
.r1{margin:0 6px;}
.r2{margin:0 4px;}
.r3{margin:0 3px;}
.r4{margin:0 2px;}
.r5{margin:0 1px;height:5px；}</style>
</head>
<body>
<div id="main">
<div class="up">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
<div class="r5"></div>
</div>
内容<br>
内容<br>
内容<br>
内容<br>
<div class="up">
<div class="r5"></div>
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div>
</div>
</div>
</body>
</html>

 

以下摘自 百度知道

圆角它靠1px的高度来拼起来的
比如： 大层div宽度为100px;

圆角开始：上

第一行div，高度为1px; 宽度为94px; 左右两边挤开3px，
第二行div，高度为1px; 宽度为96px; 左右两边挤开2px，
第三行div，高度为1px; 宽度为98px; 左右两边挤开1px，

内容

圆角开始：下

第一行div，高度为1px; 宽度为98px; 左右两边挤开1px，
第二行div，高度为1px; 宽度为96px; 左右两边挤开2px，
第三行div，高度为1px; 宽度为94px; 左右两边挤开3px，


两边的边距自定，这样就形成一个弧形了。

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/dfzone/archive/2009/02/06/3867010.aspx

hzj170
关注
div+css用边框实现圆角矩形(多样式)
09-25
css圆角卷起了一阵风波，只用css来做圆角矩形的技术很早就有了,但是在网页的设计过程中,我们通常用图片实现圆角矩形效果。现在网上很多关于无图片实现css圆角矩形的方法,虽说巧妙,但是代码冗长,难以做到简洁
利用css画圆角矩形
weixin_39594600的博客
11-27 381
利用border属性 注意：border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。 border-radius还可以用斜杠
用div实现圆角矩形
Wish神思者的专栏
01-18 1598
http://www.neuroticweb.com/recursos/css-rounded-box/
CSS画圆角
fly
03-22 368
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> div{ width: 100px;...
div+css制作圆角矩形
02-06 1893
学习了用div+css制作圆角矩形，先记下来div+css制作圆角矩形<!--body{background:white;}#main{margin:0 20%;background:red;}.up{background:white;}.up div{height:1px;overflow:hidden;ba
div+css制作圆角矩形的原理示例解读
09-25
在网页设计中，使用div+CSS来创建圆角矩形是一种常见的方法，它利用了CSS的边框和背景属性来模拟圆角效果。在没有CSS3之前，由于浏览器的兼容性问题，这种方法尤为流行。本篇文章将深入解析如何通过div+CSS实现圆角...
使用Div+CSS纯图片实现圆角矩形的方法小结
09-24
下面，我们将详细介绍几种使用Div+CSS纯图片实现圆角矩形的方法。 首先，我们需要了解圆角矩形的基本实现原理。圆角矩形可以通过CSS的`border-radius`属性轻松实现，但图片实现的方法则是通过将圆角图片分别放置在...
CSS 的圆角矩形
最新发布
m0_73740682的博客
02-24 1047
CSS 圆角矩形的学习
div盒子边框圆角_div+css用边框实现圆角矩形(多样式)
weixin_39983993的博客
12-22 963
简洁型css圆角：方法1：简洁型css圆角矩形code1:复制代码代码如下:.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{}{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{}{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{}{border-left:1px s...
CSS3 三 圆角
W_H_M_2018的博客
09-29 827
CSS3圆角 CSS3 圆角制作器 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 -webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。 属性 border-radius 9.0 5.0 4.0 -webkit- 4.0 3.0 -moz- 5.0 3.1 -webkit- 10.5 CSS3 border-radius 属性 使用 CSS3 ...
div+css实现圆角矩形的几种方法
weixin_34133829的博客
06-04 622
1.css3实现圆角矩形，兼容性有问题&lt;div id="round"&gt;&lt;/div&gt; #round {     padding:10px; width:300px; height:50px;     border: 5px solid #dedede;     -moz-border-radius: 15px;      /* Gecko browsers */     -w...
Div+Css圆角矩形
新页小苗
06-25 295
实例： &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd"&gt; &lt;HTML XMLns="http://www.w3.org/1999/xHTML" lang="UTF-8"&gt; &
纯DIV+CSS制作圆角矩形
和上帝躲猫猫
11-04 980
样式1：简洁型css圆角矩形 b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;} .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px
css设置圆角
weixin_69761220的博客
05-18 8710
用border-radius属性来设置圆角 可以写： 四个值：左上 右上 右下 左下 三个值：左上 右上左下 右下 两个值：左上右下 右上左下 一个值：共用 给单独一角设置圆角：border-xxx-xxx-radius 例如：左上角 border-top-left-radius div{ width: 100px; height: 100px; background-color: red...
css3-圆角矩形的效果
Robin罗兵
12-24 1090
css圆角特效 div{ text-align: center; font-size: 32px; width: 100px; color: white; padding: 10px; margin: 10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; } .box1{ background-co
用div画三角/矩形/圆
weixin_30412013的博客
04-27 584
1. 画三角 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> .triangle { width: 0; ...
opengl 绘制正方形边框_只用1个div，你能用CSS绘制：正3、4、5、6、7、8边形吗？...
weixin_39812039的博客
12-03 442
给你一个div，你能用CSS绘制一个正三角形、正方形、正五边形、正六边形、正七边形、正八边形吗？今天我们来玩一个有趣的CSS实验，想象下，只用一个div，你能用CSS绘制一个正三角形、正方形、正五边形、正六边形、正七边形、正八边形吗？今天笔者带着大家一起动手实践下这个有趣的联系，由于正多边形用到不少三角函数计算，为了方便计算，这里正多边形统一设定为100px，为啥只做到正八边形？因为就一个div最...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值