`
svygh123
  • 浏览: 123142 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

Div+Css一个简单圆角效果

阅读更多
<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
	div.RoundedCorner{background: #78ACFF}
	b.rtop, b.rbottom{display:block;background: #FFFFFF}
	b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #78ACFF}
	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">
	<!-- top -->
	<b class="rtop">
		<b class="r1"></b>
		<b class="r2"></b>
		<b class="r3"></b>
		<b class="r4"></b>
	</b>
	
	<!-- center -->
	<p><center>中间内容(无图片实现圆角框)</center></p>
	
	<!-- bottom -->
	<b class="rbottom">
		<b class="r4"></b>
		<b class="r3"></b>
		<b class="r2"></b>
		<b class="r1"></b>
	</b>
</div>
</body>
</html>
分享到:
评论

相关推荐

    div+css 可伸缩的圆角

    在网页设计中,"div+css 可伸缩的圆角"是一个常见的需求,它涉及到CSS3中的边框半径属性,以及如何构建响应式的布局。让我们深入探讨这个主题。 首先,`div`是HTML中的一种块级元素,通常用于组织页面结构。`div`...

    div+css实现圆角导航菜单的效果

    本文将深入探讨如何使用`div+css`来实现具有圆角效果的导航菜单。 首先,`div`是HTML中的一个块级元素,它可以被用作容器,用于组织页面内容。在创建导航菜单时,`div`可以用来包裹整个菜单或者单独的菜单项。例如...

    div+css无图片实现圆角矩形(兼容Firefox)

    div+css无图片实现圆角矩形(兼容Firefox)

    W3C网页标准、div+css教程、xhtml+css介绍

    CSS3是当前广泛使用的版本,引入了更多样式效果,如阴影、圆角、动画和过渡。 3. **XHTML (Extensible HyperText Markup Language)**:XHTML是HTML和XML的结合体,它结合了HTML的易用性和XML的严谨性,强制执行更...

    div+css后台登录模版

    回到景县恒源橡塑网项目的后台登录模版,它是一个纯Div+CSS构建的模块,意味着没有依赖任何前端框架,而是通过基础的HTML和CSS实现。这样的设计使得模板更轻量级,加载速度更快,同时也方便开发者根据自己的需求进行...

    使用Div+CSS纯图片实现圆角矩形的方法小结

    在Web开发中,圆角矩形是一种...特别是针对那些老旧浏览器或者需要精细控制圆角位置和样式的场景,使用图片来实现圆角矩形仍旧是一个不可替代的解决方案。掌握这些方法,可以为日常的Web开发提供更多的灵活性和稳定性。

    div+css呈现圆角层示例

    在提供的`圆角层示例.html`文件中,很可能会包含一个HTML结构,其中包含一个`div`元素,并应用了上述CSS样式。通过查看这个示例,你可以更直观地了解如何在实际项目中实现圆角层。 总的来说,`div+css`创建圆角层是...

    div+css select效果

    不过,对于IE6,由于其对CSS2的支持有限,可能无法实现所有复杂的美化效果,因此可能需要提供一个备选方案,如简单的无样式`select`或者JavaScript的兼容处理。 为了使`select`在视觉上与周围元素平滑融合,我们还...

    DIV+CSS IE圆角

    文件名`iecss3`可能包含的是一个解决IE圆角问题的CSS3兼容库或者是一些示例代码,它可能通过CSS滤镜或者其他技术帮助开发者在IE浏览器上实现圆角效果。使用这类资源可以帮助开发者节省时间并确保在不同浏览器中的...

    DIV+CSS漂亮的样式

    每个`&lt;div&gt;`元素都可以视为一个独立的容器,通过CSS类将样式与结构分离,使得代码更易于管理和更新。同时,`CSS`的选择器机制使得我们可以精确地选择和控制页面上的任何元素,实现精细的设计控制。 此外,`CSS`还...

    DIV+CSS 圆角边框

    标题“DIV+CSS 圆角边框”指向的是一个关于前端网页设计的技术主题,特别是如何使用HTML和CSS来实现元素的圆角边框效果。在Web开发中,DIV元素常被用作布局容器,而CSS(层叠样式表)则用于控制页面的样式和结构。在...

    html5+div+css3网站样式模板

    DivCSS则通常指使用Div元素配合CSS进行布局和样式设计。H5模板通常包含预设的HTML5结构和CSS3样式,方便开发者快速构建网页。CSS3学习则涉及对CSS3新特性的理解和实践,如选择器、布局、动画等。 在...

    div+css制作非常实用的24款分页页码css代码

    这些元素可以通过div元素进行组织,每个元素分配一个特定的class或id,以便在CSS中定义样式。 1. **基础布局**:创建一个包含所有分页元素的div容器,如`&lt;div class="pagination"&gt;&lt;/div&gt;`。在这个div内,可以为上一...

    div+css30款后台模板实用div+css30款后台模板实用

    在IT行业中,网页设计是至关重要的一个领域,而`Div+CSS`技术是构建现代网页布局的基础。"Div+CSS30款后台模板实用"这个主题聚焦于利用这些技术创建高效的后台管理界面。Div(Division)是HTML中的一个容器元素,...

    DIV+CSS实现圆角.rar

    在网页设计中,"DIV+...总结起来,"DIV+CSS实现圆角"是一个关于利用HTML&lt;div&gt;元素和CSS3的`border-radius`属性来创建具有圆角效果的网页元素的技巧。这个技术在现代网页设计中广泛应用,可以为网页增添美观和专业感。

    Div+Css的Tab菜单

    - 每个Tab作为一个单独的Div,可以通过JavaScript或CSS来切换其激活状态。 - 内容区Div根据Tab的切换,动态显示或隐藏相应的子内容区域。 4. **Tab菜单的交互实现**: - 通过JavaScript或jQuery实现Tab的点击...

    Div+Css模版

    Div(Division,分块)是HTML中的一个标签,用于创建网页上的区块或容器,而CSS(Cascading Style Sheets,层叠样式表)则是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。...

    DIV+CSS实现圆角

    DIV+CSS实现圆角,无需图片,兼容性好。

    十天学会DIV+CSS(WEB标准)

    在《十天学会DIV+CSS(WEB标准)》的压缩包中,包含的`.chm`文件是一种Windows帮助文档格式,它将所有教程内容整合在一个易于查阅的交互式数据库中。通过阅读这个文档,你可以按照每天的学习计划逐步掌握这些关键...

    div+css特效简单导航水平导航滑动门导航白色圆角

    div+css特效简单导航水平导航滑动门导航白色圆角 div+css特效简单导航水平导航滑动门导航白色圆角 div+css特效简单导航水平导航滑动门导航白色圆角 div+css特效简单导航水平导航滑动门导航白色圆角

Global site tag (gtag.js) - Google Analytics