<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body{
padding: 20px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif
}
h1,h2,p{
margin: 0 10px
}
h1{
font-size: 250%;color: #FFF
}
h2{
font-size: 200%;color: #f0f0f0
}
p{
padding-bottom:1em
}
h2{
padding-top: 0.3em
}
div#corner{
margin: 0 10%;background: #9BD1FA;width:400px;
}
b.top, b.bottom{
display:block;background: #FFF
}
b.top b, b.bottom b{
display:block;height: 1px;overflow: hidden; background: #9BD1FA
}
b.r1{
margin: 0 5px
}
b.r2{
margin: 0 3px
}
b.r3{
margin: 0 2px
}
b.top b.r4, b.bottom b.r4{
margin: 0 1px;height: 2px
}
</style>
</head>
<body>
<div id="corner">
<b class="top"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Rounded corners</h1>
<p>Rounded corners.</p>
<h2>Rounded corners</h2>
<p>
Rounded corners.Rounded corners.<br/>
Rounded corners.Rounded corners.<br/>
Rounded corners.Rounded corners.<br/>
Rounded corners.Rounded corners.<br/>
Rounded corners.Rounded corners.<br/>
</p>
<b class="bottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
最终效果：
分享到：
相关推荐
本文将详细介绍如何使用CSS3处理在所有浏览器中都兼容的无图片圆角问题，并探讨利用JavaScript库如`curvycorners.js`来进一步增强兼容性。 首先，让我们了解CSS3中的圆角属性。CSS3提供了`border-radius`属性，用于...
在网页设计中，圆角效果可以为用户界面增添柔和与现代感，但早期的Web设计中，实现圆角通常依赖于图像。随着CSS技术的发展，...现在，你已经具备了用CSS实现无图片圆角效果的知识，可以开始尝试在实际项目中应用了。
随着JavaScript和CSS技术的发展，我们可以通过纯代码方式实现无图片的圆角效果。本文将详细介绍如何利用JavaScript和CSS来创建这种效果，以及它们的优势。 首先，让我们从CSS开始。CSS3引入了`border-radius`属性，...
本教程将深入探讨如何使用jQuery轻松实现一个无图片的圆角背景下拉菜单，这一方法对于创建现代、简洁的网站界面非常有用。 首先，我们需要理解下拉菜单的基本结构。通常，下拉菜单由一个主菜单项和一组隐藏的子菜单...
《图片圆角工具iRoundPic：轻松实现图片美学修饰》 在数字图像处理领域，有时候一个小小的细节调整就能让图片呈现出完全不同的效果。"图片圆角工具iRoundPic"就是这样一款专注于图片圆角处理的软件，它以简洁的操作...
用css控制的无图片圆角table div#nifty{ margin: 0 10%;background: #9BD1FA} p {padding:10px}
CSS3引入的`border-radius`属性是实现无图片圆角的核心。这个属性允许我们为元素的每个角落指定不同的圆角半径，语法如下： ```css element { border-radius: top-left-radius top-right-radius bottom-right-...
易语言Exdui无锯齿自定义圆角图片框是一个基于易语言的扩展模块，它专为实现高质量、平滑边缘的圆角图片显示而设计。Exdui（易语言扩展用户界面）是一种图形用户界面库，允许程序员通过易语言进行更高级、更灵活的...
本示例重点讲解如何利用XAML实现图片的圆角、倒角、部分显示以及渐变效果。 首先，我们来看如何实现图片的圆角效果。在WPF中，我们可以使用`Border`控件结合`CornerRadius`属性来实现。例如，将一个`Image`控件放置...
在Android开发中，为了满足各种视觉设计需求，我们经常需要对ImageView进行自定义，以便实现如图片圆角、圆形图片或椭圆形图片的效果。本文将详细介绍如何在Android中通过自定义ImageView来实现这些功能，无需引入...
本压缩包文件“安卓头像制作图片圆角剪裁相关-Android创建抗锯齿透明背景圆角图像.zip”包含了一些资源和源码，可以帮助开发者实现这一功能。下面我们将详细探讨如何在Android中创建这样的图像。 首先，我们可以从...
本篇文章将深入探讨如何利用CSS来创建无背景图片的圆角效果。 首先，CSS3引入了`border-radius`属性，它允许我们设置元素边框的圆角半径。这个属性可以分别对元素的四个角进行独立控制，也可以一次性设置所有角的...
标题 "最简洁图片圆角边框-无需额外标签" 暗示了这个主题是关于在HTML和CSS中实现图片的圆角边框效果，而且方法简单，不需要使用额外的HTML标签。通常，CSS3提供了`border-radius`属性来创建圆角效果，但这可能不...
本文将详细介绍如何通过纯CSS技术来创建无图片的div圆角效果，并探讨其背后的原理和技术细节。 #### 实现原理 本案例采用的是层叠样式表（CSS）的技术来实现div圆角效果，具体来说是利用了CSS中的`border-radius`...
本项目提供了通过CSS和JavaScript实现图片圆角功能的方法，已经过测试，确保其有效性和兼容性。以下是对这个“图片圆角功能（已测试）”的详细解释。 首先，我们来关注`niftyCorners.css`文件。这是一个CSS样式表，...
在Android开发中，头像制作和图片圆角剪裁是一项常见的需求，特别是在社交应用和个性化设置中。这个压缩包“Android图像类Image Filter.rar”似乎包含了一些与这一主题相关的源代码，但需要注意的是，由于文件数量较...
在Unity引擎中，创建无锯齿、圆滑的圆角头像或圆角图形是一项常见的需求，特别是在用户界面（UI）设计中。本教程将详细解释如何实现这一目标，主要聚焦于自定义UGUI（Unity Graphic System）组件和Shader的应用。 ...