圆角框问题

最新推荐文章于 2022-12-16 10:59:05 发布
最新推荐文章于 2022-12-16 10:59:05 发布
阅读量1k 收藏
点赞数
分类专栏： HTML/CSS 文章标签： xhtml url html border 文档 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangna01314/article/details/4947361
版权

圆角设计

1、  固定宽度的圆角框

1.1、        两背景图像法

 

 

然后把上、下两头剪下来，如图所示：

Top头：

Bottom头：

看一下html代码：

<!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=gb2312" />

<style>

#rounded{

       font-size:12px;

       background:#b8f2a1 url(bottom.jpg) no-repeat left bottom;

       width:288px;

       padding:0 0 18px;

       margin:0 auto;

}

#rounded h3{

background:url(top.jpg) no-repeat;

padding:5px 20px 0;

font-size:10px;

line-height:1;

margin:0;

}

#rounded p{

       padding:10px 20px 0;

       margin:0;

       text-indent:2em;

       }

      

</style>

<title>无标题文档</title>

</head>

 

<body>

<div id="rounded">

<h3>固定圆角框</h3>

<p>这是一个固定的圆角框，鱿鱼是固定的宽度，因此制作起来容易和简单很多。这个圆角框的上下随着内容增多可以自由伸展，圆角不会被破坏。</p>

</div>

</body>

</html>

1.2、        使用透明背景图

可以把圆角图像的主体颜色变为透明色，而圆角外侧三角形仍然为网页背景颜色。这样的好处是，这个圆角框的颜色可以通过div的背景色任意设置，而不需要在图片中设置了，这样大大增加灵活性。

1.3、        带边框的固定宽度圆角框

其实做法跟上面两背景图像法做法一样，首选切图：

 

 

 

 

 

看一下代码：

<!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=gb2312" />

<style>

#rounded{

       font-size:12px;

       background:url(22.jpg) repeat-y;

       width:288px;

       padding:0;

       margin:0 auto;

}

#rounded h3{

background:url(11.jpg) no-repeat;

padding:20px 20px 0;

font-size:12px;

margin:0;

}

#rounded p{

       padding:10px 20px 18px;

       margin:0;

       text-indent:2em;

       background:url(33.jpg) no-repeat left bottom;

       }

      

</style>

<title>无标题文档</title>

</head>

 

<body>

<div id="rounded">

<h3>固定圆角框</h3>

<p>这是一个固定的圆角框，鱿鱼是固定的宽度，因此制作起来容易和简单很多。这个圆角框的上下随着内容增多可以自由伸展，圆角不会被破坏。</p>

</div>

</body>

</html>

看一下效果图：

 

2、  不固定宽度的圆角框

2.1、“4图像”单色不固定宽度圆角框

首先准备4个圆角图像

               

现在我们来看一下代码:

<!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=gb2312" />

<style>

#rounded{

       font-size:12px;

       background: url(topright.jpg) no-repeat right top;

       width:288px;

       padding:0;

       margin:0 auto;

}

#rounded h3{

background:url(topleft.jpg) no-repeat;

padding:20px 20px 0;

font-size:12px;

margin:0;

}

#rounded p{

       margin:0;

       text-indent:2em;

       background:url(bottomleft.jpg) no-repeat left bottom;

       }

#rounded span{

background:url(bottomright.jpg) no-repeat right bottom;

display:block;

padding:10px 20px 18px;

}    

</style>

<title>无标题文档</title>

</head>

 

<body>

<div id="rounded">

<h3>固定圆角框</h3>

<p><span>这是一个不固定的圆角框，由于宽度不固定，因此制作取来复杂一点。这个圆角框的上下随着内容的增多可以自由伸展，圆角不会被破坏。此外，使用设置为不同的宽度，同样也使用。</span></p>

</div>

</body>

</html>

效果图如下图所示：

 

现在看已经可以了，在加上背景色就完工了

在#rounded里面加上background:#b8f2a1 url(topright.jpg) no-repeat right top;就得到下面的效果：

 

 

如果把div的宽度设置成60%，然后在不同的浏览器中观看，效果如图所示，可以看到它很好的适应了浏览器窗口宽度的变化。

 

 

 

 

 

 

 

 

2.2、“4图像滑动门”单色不固定宽度

我们先来看一下htnl代码：

<!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=gb2312" />

<style>

#rounded{

       font-size:12px/1.6;

       background:#318c0d url(top.jpg) no-repeat left top;

       width:60%;

       padding:0;

       margin:0 auto;

}

#rounded h3{

background:url(topright.jpg) no-repeat right top;

padding:20px 20px 0;

font-size:12px;

margin:0;

}

#rounded p{

       margin:0;

       text-indent:2em;

       background:url(bottom.jpg) no-repeat left bottom;

       }

#rounded span{

background: url(bottomright.jpg) no-repeat right bottom;

display:block;

padding:10px 20px 18px;

}    

</style>

<title>无标题文档</title>

</head>

 

<body>

<div id="rounded">

<h3>固定圆角框</h3>

<p><span>这是一个不固定的圆角框，由于宽度不固定，因此制作取来复杂一点。这个圆角框的上下随着内容的增多可以自由伸展，圆角不会被破坏。此外，使用设置为不同的宽度，同样也使用。</span> </p>

</div>

</body>

</html>

显示的效果图如下图所示：

 

但是这样工作的缺点是top.jpg和bottom.jpg的图片要足够的长，要不然就会出现下面的情况:如图所示：

 

 

 

因为上边和下边的图片不足够的长而导致这样的问题。

2.3、“5图像”二维滑动门经典圆角框

首先我们先切图，切图思路如下图：

 

下面我们来看一下html代码：

<!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=gb2312" />

<style>

body{

       font:12px/1.5;

       }

#rounded{

       width:80%;

       border:1px solid red;

}

#rounded h3{

border:1px solid blue;

}

#rounded #main{

border:1px solid black; 

       }

#rounded #footer{

border:1px solid magenta;

}

#rounded #footer p{

       border:1px solid blue;

       }    

</style>

<title>无标题文档</title>

</head>

 

<body>

<div id="rounded">

<h3>固定圆角框</h3>

<div id="main">

       <p>这是一个不固定的圆角框，由于宽度不固定，因此制作取来复杂一点。这个圆角框的上下随着内容的增多可以自由伸展，圆角不会被破坏。此外，使用设置为不同的宽度，同样也使用。</p>

</div>

<div id="footer"><p>这是版权问题。</p></div>

</div>

</body>

</html>

效果图：

 

下面来放置背景图片：

#rounded{

       width:80%;

       background:url(left-top.jpg) top left no-repeat;

}

#rounded h3{

background:url(right-top.jpg) top right no-repeat;

padding:20px 20px 10px;

margin:0;

}

#rounded #main{

background:url(right.jpg) top right no-repeat;

padding:10px 20px;

margin:-2em 0 0 0 ;

       }

#rounded #footer{

background:url(left-bottom.jpg) bottom left no-repeat;

}

#rounded #footer p{

background:url(right-bottom.jpg) bottom right  no-repeat;

display:block;

padding:10px 20px 20px;

margin:-2em 0 0 0 ;

       }

最后效果如图所示：

 

 

yangna01314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF去掉边框及设置圆角框
Nikita
07-31 1825
去掉窗体边框 <windows WindowStyle="None" AllowsTransparency="True"></windows> 设置窗体不可手动改变大小 <windows ResizeMode=NoResize></windows> 窗体无边框时拖动窗体 在XAML中写入MouseMove事件 <Window x:Cl...
CSS 圆角框进行JS封装版
09-25
在封装过程中，还修复了之前背景图片定位错误的问题，确保了圆角框在各种情况下的正确显示。JS代码简洁明了，主要通过innerHTML来更新DOM元素的内容，并结合CSS样式实现圆角效果。难点在于如何高效地组合和合并CSS...
CSS学习文档（四）：圆角边框、盒子阴影、浮动、学成在线案例
weixin_42044763的博客
05-12 1486
一、圆角边框，盒子阴影 1.圆角边框 在CSS3中新增了圆角边框的样式，这样盒子就可以变成圆角。语法是border-radius: length; 其中参数length表示圆角的半径，半径越大说明在角上画的⚪越大，那么圆角矩形的边框也就越⚪ border-radius: 20px; 如何画⚪？前提如果是正方形的盒子，那么length的值是宽高的一半即可，或者直接写50% border-radius: 50%; 如果想搞一个圆角矩形，那么length设置成高度的一半就可以了。 当然，也可以分别设置四个角
QT圆角，边框圆角问题
weixin_45827115的博客
12-16 994
（假如border 设置了10px宽度大小，border-radius:设置比较小的话，就会出现，边框是圆的，但是里面的content是直角的，如图2）（想要里面的content和边框都是圆角的话就得把border 的宽度设置为1px 宽，这个时候切圆角时就会把里面的content给切割，如图三）值得注意的是，border-radius:边框圆角的大小和border 的宽没有关系。:第二层，这个可以设置边框的粗细和样式。：为最外层，是空白的，用来做间隔距离。
flutter Container 圆角 边框
仰望星空
12-25 1万+
Container( decoration: new BoxDecoration( border: new Border.all(color: Color(0xFFFF0000), width: 0.5), color: Color(0xFF9E9E9E), borderRadius: new BorderRadius.circular(...
input框设置圆角
热门推荐
大雷
05-03 3万+
&lt;style&gt;.btn{ width: 200px;                                              height: 30px;      background: #ccc;      border: 1px solid #eee;      border-radius: 15px;                            //圆...
渐变边框圆角问题解决
laosi576197029的博客
07-19 995
边框渐变使用属性border-image: linear-gradient(180deg, red, blue);圆角不生效问题
html中正方形圆角框,CSS高级技巧:圆角矩形
weixin_40003233的博客
06-01 801
所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍.CSS2 还没有办法创造出曲线边框, 明显的, 仅仅方框是没办法满足我们设计师的. 所以CSS圆角技术到现在还是那么的火.1. 固定宽度的纯色圆角矩形在众多圆角技术中, 固定宽度的圆角矩形应该是最容易实现的, 只需要2个图片以及一段简单的ht...
html css边框圆角,css边框内圆角实现的2种方法
weixin_34058060的博客
06-14 867
边框内圆角在学习多重边框的时候我们用到了两个属性box-shandow和outline，outline 描边并不会跟着元素的圆角走，但是box-shandow 是会的。因此我们利用两者的结合便可实现下图的效果1、思路如下：为元素设置圆角，外层设置轮廓outline。圆角与直角之间的空隙用阴影补齐，阴影的尺寸为圆角半径的一半html>.uu{margin:100px;width:200px...
css带尾巴的圆角框,CSS实现绝对的完美圆角框
weixin_36173034的博客
08-03 338
本文探讨的是圆角框的终极解决方案，其核心关键词是“圆滑、完美、兼容、重用性、语义”，这些技术都是收集目前网络上最流行的做法。纵观种种方法，各有其优势，请针对不同的环境分别使用。第五种：利用私有属性绘制圆角(FF3 only)收录理由：平滑无锯齿图五特点：不用任何图形。兼容性：只能在FF3中使用，其它浏览器不受支持。圆角半径随意调整重用性强：多个圆角任意调用，只需要样式表设置就可以。圆角颜色随意设置...
圆角框的制作
12-09
在网页设计中，圆角框是一种常见的视觉元素，它能够为网页增添柔和、现代的感觉，同时也能提升用户体验。本文将深入探讨如何使用CSS技术来创建圆角框，并结合实际资源进行学习。 首先，我们了解CSS中的`border-...
圆角编辑框
09-29
"圆角编辑框"是一种自定义控件，它通过结合静态文本框（CStatic）和编辑框（CEdit）来实现视觉上具有圆角效果的输入框。这种自定义控件可以增加界面的美观性和用户体验。下面我们将详细探讨如何实现这样的功能。 ...
易语言Exdui无锯齿自定义圆角图片框
01-25
易语言Exdui无锯齿自定义圆角图片框是一个基于易语言的扩展模块，它专为实现高质量、平滑边缘的圆角图片显示而设计。Exdui（易语言扩展用户界面）是一种图形用户界面库，允许程序员通过易语言进行更高级、更灵活的...
圆角框jquery
06-08
在网页设计中，圆角框是一种常见的视觉元素，它能够为网页界面增添柔和与美观的效果。jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的DOM操作、事件处理、动画设计以及Ajax交互。在本篇文章中...
纯CSS写的tab菜单
我想要生活简单一点。
11-28 3159
 今天用CSS写了一个tab菜单，先来看一下效果图：接下来，我们来看一下下代码：home页代码：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">纯CSS的tabs菜单   首页  产品中心  人才招聘   我是首页因为有两个超链接，看一下另外
相对定位和绝对定位
我想要生活简单一点。
11-30 684
盒子的定位其实从用div+css写布局以后，我很少使用布局，追其原因还是对盒子的定位没有搞清楚，而在jquery中，CSS样式很重要，而定位显得更重要，所以，现在重新学习定位。广义的“定位”：要将某个元素放到某个位置时候，这个动作称之为定位操作，狭义的“定位”：在CSS中的一个非常重要的属性“position”。Position的属性有4个：static是默认属性，就是该盒子按照标准流进行
DIV+CSS面试八个题
我想要生活简单一点。
12-01 637
这些都是之前学习的时候总结的，现在把它们都上传上来：DIV+CSS面试八个题是之前在哪个网站看到了，现在怎么也找不到了，索性自己留一份吧！一、超链接访问过后hover样式就不出现的问题？　　被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A二、IE6的双倍边距BUG　　例如:Example Source Code [www.
图片超链接消除虚线
我想要生活简单一点。
01-05 566
超链接时候的隐藏虚线：在样式里面写outline：none                              在页面里面写hidefocus="true"
Java swing实现圆角方框
最新发布
06-12
要在 Java Swing 中实现圆角方框的效果，可以通过设置组件的 Border 来实现。可以自定义一个 Border 类来实现圆角方框的效果。具体方法如下： 1. 创建一个 RoundedBorder 类，该类继承 javax.swing.border....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值