本人做的自适应高度的CSS圆角

最新推荐文章于 2022-04-27 21:59:49 发布
最新推荐文章于 2022-04-27 21:59:49 发布
阅读量1.2k 收藏
点赞数
分类专栏： 网页设计制作 文章标签： css class xhtml float div html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq415734794/article/details/3921751
版权

这是本人之前在做项目的时候做的一个CSS圆角，其中细节上的大家如果还不清楚可以加我的QQ：415734794！还有更多关于DIV+CSS的技术，可以找我！愿与大家一起分享技术！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自适应高度的CSS圆角</title>

<style type="text/css">
.b1,.b2,.b3,.b4{ overflow:hidden; display:block; font-size:1px; clear:both;}
.b2,.b3,.b4{ background:#ffffff;  height:1px;border-right:2px solid #80ACE9; border-left:2px solid #80ACE9; }
.b1{ height:1px;background:#80ace9; width:274px; margin:0 5px;}
.b2{margin:0 3px; width:274px;}/*四边角*/
.b3{ margin:0 2px; width:276px;}
.b4{margin:0 1px;width:278px;}
#contentb {background: #ffffff; border-right:2px solid #80ACE9; border-left:2px solid #80ACE9; padding:4px; width:272px; float:left;}/*中间的矩形样式*/
#aa{float:left;padding-left:0px;margin-right:0px;width:285px;height:auto;font-family:"微软雅黑", Arial, "宋体";font-size:12px;}
</style>
</head>
<body>
<div id="aa">
<span class="b1"></span><span class="b2"></span><span class="b3"></span><span class="b4"></span>
<div id="contentb">
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;/* width:280px;*/}
.b1 {height:1px; background:#80ACE9; margin:0 5px; width:274px;}/*上下的边界样式*/
.b2 {height:1px; background:#ffffff; border-right:2px solid #80ACE9; border-left:2px solid #80ACE9; margin:0 3px; width:274px;}/*四个角的样式*/
.b3 {height:1px; background:#ffffff; border-right:2px solid #80ACE9; border-left:2px solid #80ACE9; margin:0 2px; width:276px;}/*设置边界过渡样式*/
.b4 {height:2px; background:#ffffff; border-right:2px solid #80ACE9; border-left:2px solid #80ACE9; margin:0 1px;width:278px;}/*设置边界过渡样式*/
</div>
<span class="b4"></span><span class="b3"></span><span class="b2"></span><span class="b1"></span>
</div>
</body>
</html>

勿忘心安Billy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS技术实现可变高度的圆角矩形框-so easy
--时刻反思，多多思考
08-25 2840
在上一篇的文章http://blog.csdn.net/wz537071/article/details/47910757#reply中，总结了下用纯CSS制作圆角矩形框的知识，并且最终做出来自己想要的那个样式。在网页设计中，还有很多的可变宽度的圆角矩形框的使用，一些网页不可能用一些固定宽度的圆角矩形框来显示内容，可变宽度的圆角矩形框的使用地位是很重要的，那么现在来扩展下思维，能不能用纯CSS的技
css设置圆角矩形根据高度变化
qq_33721778的博客
03-29 367
实现效果： 实现方式 给border-radius设置一个特别大的值 border-radius: 99999999rem;
一段自适应高度的圆角css矩形
漠上风情的专栏
12-06 1125
html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>自适应圆角做法title>style type="text/css">#xsnazzy h1, #xsnazzy h2,
CSS 圆角
weixin_45982458的博客
02-12 529
有弧度的圆角四个角统一弧度border-radius: 10px; 胶囊型，元素不能是正方的，圆角是高度的一半 圆形， div{ width: 100px; height: 100px; border-radius: 50%; background-color: green; } 椭圆形 div{ width: 200px; height: 100px; border-radius: 50%; background-color: green; } ...
CSS圆角
y_19018的博客
02-23 392
这是我在逆战班学习的第三周 以下我总结了《css 圆角》的使用。 css 圆角 一、Border-radius 圆角属性？ 可以给一个元素添加圆角的属性。 二、Border-radius 设置属性值？ 1.border-radius：50px 写一个值时，是指 四个圆角值相同，一个元素四个角都被一个半径为50px的圆形相切。 如图： 那么，一个元素也可以被一个椭圆形相切。如图： #box1{ w...
自适应宽度的CSS圆角背景的按钮
01-28
总结起来，创建自适应宽度的CSS圆角背景按钮，主要依赖于`border-radius`属性实现圆角效果，利用`display: inline-block;`和不设定固定宽度实现自适应宽度，以及通过适当的内填充和文本对齐方式保持内容居中。通过...
CSS基于单张背景图实现自适应宽度的圆角菜单效果代码
01-19
这是一款基于单张背景图片实现的CSS圆角菜单，菜单项的背景可自适应宽度，当菜单项内的文字超出预定宽度时，并不会将文字隐藏掉，而背景自动加宽，以适应文字的需要，设计的很漂亮，也很实用，学习CSS的朋友也可参考...
CSS3自适应文字的圆角菜单.rar
07-10
CSS3自适应文字的圆角滚动菜单特效，CSS3 jQuery结合实现，这里的圆角是指图片的边框修饰成了圆角，看上去很不错的图文菜单，响应鼠标滚动的功能，从操作体验上来说，十分舒服，也很灵敏，滚动幅度掌握的相当好，...
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
10-23
主要介绍了JS+CSS实现自适应选项卡宽度的圆角滑动门效果,通过简单的css设置实现圆角滑动门功能,非常简单实用,需要的朋友可以参考下
CSS基础
qq_51220629的博客
04-27 354
CSS装饰效果—垂直对齐方式、光标类型、边框圆角、 overflow溢出部分显示效果、元素本身隐藏等
一张图片的CSS自适应尺寸圆角方案
03-01
NULL 博文链接：https://achun.iteye.com/blog/281068
CSS自适应宽度圆角按钮
12-10
CSS自适应宽度圆角按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS自适应宽度圆角按钮</title> <style> *{margin:0; padding:0;} body{padding:10px; font-size:12px;} h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;} a{background:url(41205957519.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;} a:hover{background:url(41205957519.gif) left 30px;height:30px;} a span{background:url(41205957519.gif) right 0; padding:9px 8px 5px 0; margin:0 0 0 8px; float:left; height:16px;} a:hover span{background:url(41205957519.gif) right 30px; color:#000; padding:9px 8px 5px 0; margin:0 0 0 8px; height:16px; } </style> </head> <body> <h1><strong>CSS自适应宽度圆角按钮</strong></h1> <a href="#"><span>首页</span></a> <a href="#"><span>不是首页</span></a> <a href="#"><span>他也许是首页</span></a> <a href="#"><span>但他一定不是首页</span></a> <a href="#"><span>好了，就这样把。别扯了~</span></a> </body> </html>
css+div+图片实现高度自适应圆角框
兜ぃф糖
12-26 2843
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 高度自适应的圆角框 .content{  width:562px;} .top{  height:31px;  background-image:url(images/1.PNG);  back
css 按钮小圆角,CSS自适应宽度圆角按钮做法
weixin_42545664的博客
08-03 790
之前做圆角，一直是切适当大小的背景图片切换的，这么久了才发现这简单的自适应圆角做法，自己也写一下吧，做个笔记吧。本打算自己写一个，LIO的博客写的很清楚，就直接转载了按钮图片自适应宽度圆角按钮实现原理通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图 片。CSS:a{background:url(lio.gif) left 0; color:#ff...
CSS如何将border-radius设置为高度的一半
小诸葛的博客
12-02 2653
将border-radius设为一个超大值就可以了 border-radius: 999999px;
CSS如何设置元素高度一半的边框
AzeShinja的博客
08-11 1707
使用伪类的实现方法 HTML的结构 <el-form ref="form-head" label-width="auto" inline class="form-header-box"> <transition-group name="el-zoom-in-center" tag="div"> <!-- <el-form-item key="name" label="姓名"> &l.
Glide 设置圆角大小，圆角大小不一致
Ltp_zy的博客
06-25 2953
解决方案：基于Glide 3.7.0  //用于Glide圆角的第三方库 compile 'jp.wasabeef:glide-transformations:2.0.1'Glide.with(cxt).load(url) .error(errorPic) .crossFade()//渐变时间 .bitmapTransform(new CenterC...
不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形
sinat_21112393的博客
05-27 1525
在一个div内，包含8个div，控制这个8个div的height、margin以及border属性值，以达到圆角矩形效果,不过要注意div的顺序。 &lt;body&gt; &lt;div class="bor"&gt; &lt;div class="b1"&gt;&lt;/div&gt; &lt;div class="b2"&gt;&lt
CSS3学习笔记.pdf
最新发布
04-29
“CSS3学习笔记.pdf”主要介绍了CSS3的基本概念和边框相关的特性，包括选择器、边框样式、边框圆角、边框阴影以及边框图像等。 在深入探讨CSS3之前，先来理解CSS3的核心地位。CSS3是层叠样式表（Cascading Style ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值