`
ice-cream
  • 浏览: 329175 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

灵活的圆角框

    博客分类:
  • Css
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
<!--
.box{
	width:20em;
	background:#ffffff url(http://ice-cream.iteye.com/upload/picture/pic/8113/5db63aa3-4742-3124-9347-5b24be3ac140.gif) no-repeat left bottom;
	color:#666666;
}

.box_outer{
	background:url(http://ice-cream.iteye.com/upload/picture/pic/8116/3b8d86cf-5f51-32ac-843a-add5e7330db0.gif) no-repeat right bottom;
	padding-bottom:5%;
}

.box_inner{
	background:url(http://ice-cream.iteye.com/upload/picture/pic/8118/1cdc0448-19de-3b09-9484-8663b57d9336.gif) no-repeat left top;
}

h2{
	background:url(http://ice-cream.iteye.com/upload/picture/pic/8120/b18eedeb-18bf-37b3-bd77-48895ac79037.gif) no-repeat right top;
	padding-top:5%;
}

h2,p{
	padding-left: 5%;
	padding-right:5%;
}
-->
</style>
</HEAD>

<BODY style="font-size:12px;">
	<div class="box">
		<div class="box_outer">
			<div class="box_inner">
				<h2>Lorem lpsum</h2>
				<p>Lorem ipsum dolor sit amet,consecteuer adlipiscing elit.Proin venenatis turpis ut quam.In dolor.Nam ultrixes nis!sollicitudin sapien.Ut lacinia aliquet ante.</p>
			</div>
		</div>
	</div>
</BODY>
</HTML>
 

你可以随意改动<BODY style="font-size:12px;">中font-size的大小,这时你会发现圆角框会因文本尺寸进行伸缩,很灵活,很强大!

  • 大小: 34.9 KB
分享到:
评论

相关推荐

    圆角框实现

    本篇文章将详细介绍如何通过背景图像来创建固定宽度和灵活宽度的圆角框。 一、固定宽度的圆角框 1. CSS边框图像(border-image)属性:CSS3引入了`border-image`属性,可以让我们使用图像来绘制边框,包括圆角边框...

    易语言Exdui无锯齿自定义圆角图片框

    易语言Exdui无锯齿自定义圆角图片框是一个基于易语言的扩展模块,它专为实现高质量、平滑边缘的圆角图片显示而设计。Exdui(易语言扩展用户界面)是一种图形用户界面库,允许程序员通过易语言进行更高级、更灵活的...

    宽高无限制圆角框css

    总之,"宽高无限制圆角框css"是CSS布局技巧的一种,它结合了`border-radius`属性来创建圆角效果,以及灵活的宽度和高度设置来适应内容的变化。通过这样的方法,我们可以创建出既美观又能适应不同内容的网页元素。

    CSS实现绝对的完美圆角框

    在网页设计中,实现圆角框是提升用户体验和视觉效果的重要手段。圆角框因其美观性和柔和的视觉感受,被广泛应用于网页、博客等界面设计中。然而,要让圆角框在各种浏览器中都能完美呈现,对于前端开发者来说是一项...

    简单圆角框

    总的来说,"简单圆角框"的实现方式体现了CSS在网页设计中的灵活性,即使在技术有限的情况下,也能创造出美观的效果。然而,随着技术的发展,推荐使用CSS3的`border-radius`属性来创建圆角框,以获得更好的性能和跨...

    CSS实现绝对的完美圆角框.docx

    【CSS实现绝对的完美圆角框】 在网页设计中,圆角框因其优雅的外观而备受青睐,然而在不同浏览器间实现圆角框的兼容性却一直是开发者面临的一大挑战。本文将详细介绍四种主流的CSS圆角框实现方法,旨在提供一个全面...

    CSS圆角框-免费下载

    ### CSS圆角框技术解析与实现方案 #### 一、引言 随着Web技术的发展,网页设计中的视觉效果越来越受到重视。其中,圆角框因其美观性和多样性而在前端设计中占据了一席之地。本文将详细介绍七种不同的圆角框实现...

    可变高宽的圆角框————html+css

    圆角框的实现通常依赖于CSS的`border-radius`属性,但在某些情况下,尤其是对于复杂的布局或老旧浏览器的支持,使用背景图片结合绝对定位是一种更兼容且灵活的方法。这种方法的核心是将圆角分割成多个部分(通常是...

    Android-RCImageView自定义圆角ImageView带边框效果

    这个自定义组件可以为用户提供更灵活的图像展示方式,增强应用的视觉体验。 首先,我们要了解Android中的ImageView。ImageView是Android SDK提供的一种基本视图,用于显示图像资源,如图片、图标等。然而,原生的...

    css 圆角框组件 v1.0 冰极峰原创作品

    在网页设计领域,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档样式的样式表语言。...通过灵活运用和自定义,开发者可以轻松地在自己的项目中实现各种风格的圆角框效果。

    纯css标题框圆角代码

    总之,纯CSS创建圆角标题框是一种高效且灵活的方法,它结合了`border-radius`、`box-shadow`、`background-color`等属性,可以创建出具有专业外观的标题框。熟练掌握这些CSS技巧,将使你在网页设计中游刃有余。通过...

    无敌的 Jquery 圆角透明边框

    "无敌的 Jquery 圆角透明边框" 插件就是为了解决这个问题而诞生的,它为网页开发者提供了一种简单、灵活的方式来创建具有圆角和透明边框的元素,从而提升网页的美观度和交互性。本文将深入探讨这个基于 jQuery 的...

    css实例 包括 布局 菜单 下拉菜单 导航条 圆角框等

    在CSS(层叠样式表)领域,理解和应用各种布局、菜单、下拉菜单、导航条以及圆角框等设计元素是至关重要的。这些组件是构建现代网页界面的基础,能够为用户提供直观、美观且易于导航的体验。下面我们将深入探讨这些...

    CSS+Jquery实现页面圆角框方法大全

    除了上述方法外,还可以通过JQuery结合CSS来实现更加灵活和强大的圆角框效果。JQuery作为一个JavaScript库,可以简化DOM操作、事件处理以及动画效果的实现,使得动态内容的更新和页面交互变得更为高效。结合CSS,...

    火山安卓圆角和圆形图片框,rar

    "火山安卓圆角和圆形图片框"是这个框架中的一个特性,用于实现图片显示时的圆角效果和完全圆形的图片框。在本源码中,开发者可以深入理解火山安卓如何实现这一功能,以及它的工作原理。 首先,让我们来看看"圆角...

    圆形,圆角,带边框的圆形imageView

    综上所述,实现"圆形,圆角,带边框的圆形imageView,以及白色边框的圆形imageview"主要依赖于对Android Shape Drawable的理解和灵活运用,或者利用现有的库。通过自定义View或使用第三方库,开发者可以轻松地创建出...

    div圆角代码 非常简单的圆角代码

    1. **无图片纯CSS圆角框**: 这种方法利用多个`div`容器和CSS的边框、背景色来模拟圆角。优点是兼容性强,适用于所有浏览器,但缺点也很明显,如需要添加大量无语义标签,结构冗余,重用性不佳,不易实现渐变背景,...

    c#自定义圆角panel

    这允许我们在父类的OnClick方法基础上添加自定义逻辑,比如弹出消息框、执行特定的操作等。 至于文件中的"ControlPanel.dll",这是一个编译后的动态链接库(DLL)文件,其中包含了上述自定义控件的实现。开发者可以...

Global site tag (gtag.js) - Google Analytics