`
taito
  • 浏览: 96797 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

圆角边框CSS做法

CSSXHTMLHTML 
阅读更多
主要是利用一个有四个角的混和背景图片，显示不同的地方。再用position的相对定位法，定义到div的四个角做透明背景即可。配合一个颜色差不多的边框背景，就可以显示完美的圆角背景框了。 



<!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" />
<title>圆角边框CSS做法</title>
<style type="text/css">
/*
anthor:taito
*/
.Container{position:relative;margin:0px;padding:0px; width:684px; text-align:center}
.Box{border:1px solid #d4dae8;background:url(BG.jpg) bottom center no-repeat;padding:0px;}
.Corner{position:absolute;width:7px;height:7px;background:transparent url(Corners.png) top left no-repeat;}
.ie6 .Corner{display:none;}
.CornerTL{background-position:left -7px;top:0px;left:0px;}
.CornerTR{background-position:left 0px;top:0px;right:0px;}
.CornerBL{background-position:left -14px;left:0px;bottom:0px;}
.CornerBR{background-position:left -21px;right:0px;bottom:0px;}
</style>
</head>

<body>
<div class="Container">
	<div class="Box">Corner</div>
	<div class="Corner CornerTL"> </div>
	<div class="Corner CornerTR"> </div>
	<div class="Corner CornerBL"> </div>
	<div class="Corner CornerBR"> </div>
</div>

</body>
</html>
  • 大小: 2.8 KB
  • 大小: 320 Bytes
  • 大小: 11.7 KB
1
顶
1
踩
分享到：
| Show一下ROR结合Ext的成果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div css圆角代码各种圆角表格_圆角边框css圆角

    本篇文章将深入探讨如何使用 `div` 和 `CSS` 实现各种圆角表格和圆角边框。 首先，我们了解 `div` 元素。`div` 是一个通用的容器元素，用于组合网页上的其他元素。通过应用样式，我们可以让 `div` 元素呈现不同的...

    css3实现圆角边框

    css3中的边框一般多为矩形，也可以通过设置实现圆角边框的效果，通过border-radius:;通过设置该属性值得大小改变边框的圆角大小，从而达到自己需要的圆角边框效果

    css圆角边框css圆角边框css圆角边框

    css圆角边框css圆角边框css圆角边框css圆角边框css圆角边框

    css 图片圆角边框的效果

    在CSS中，实现图片圆角边框的效果是一种常见的设计技巧，尤其在老版本浏览器不支持CSS3圆角边框属性时。本篇文章将详细介绍如何利用CSS结合图片来创建具有圆角边框效果的元素。 首先，我们需要理解CSS的背景属性。`...

    CSS+JS实现的圆角边框TAB选项卡滑动门代码

    "圆角边框"是CSS3引入的一个特性，可以使得元素的边框呈现出柔和的曲线效果，而"TAB选项卡"则是常见的一种网页布局模式，通常用于组织和展示大量内容。"滑动门"是一种JavaScript实现的动画效果，它通过改变元素的...

    DIV+CSS 圆角边框

    在早期的CSS版本中，实现圆角边框需要使用图片或者JavaScript，但随着CSS3的引入，这一过程变得更加简洁。 首先，我们来看CSS3中的`border-radius`属性，这是实现圆角边框的关键。`border-radius`允许开发者为每个...

    CSS圆角边框制作代码

    本篇文章将深入探讨如何使用CSS来实现圆角边框。 首先，CSS3引入了`border-radius`属性，它允许我们为元素的每个角落设置独立的圆角半径，从而实现圆角效果。基本语法如下： ```css element { border-radius: top...

    Div圆角边框CSS实例下载.rar

    Div圆角边框CSS实例下载，用图片修饰而成的圆角，虽然用了图片，不过新手容易上手，特别是对DIV css不熟悉的朋友，更易套用在自己的网站里，做留言本或评论系统超不错哦！由源码素材网提供下载，谢谢你的支持。

    无懈可击的CSS圆角边框(自由伸缩)

    ### 无懈可击的CSS圆角边框(自由伸缩) #### CSS圆角边框技术解析 在网页设计中，圆角边框是一种常见的视觉元素，能够为页面带来更加柔和、美观的效果。然而，当涉及到创建一个可以自由伸缩的圆角边框时，就需要...

    Css3圆角边框

    其中，"Css3圆角边框"是其中一个非常重要的特性，它允许我们创建具有平滑圆角的矩形元素，提升了网页的视觉效果和用户体验。这个特性在现代网页设计中被广泛使用，因为相比传统的JavaScript或图像方法，CSS3的圆角...

    css 圆角边框 样式表

    其中，圆角边框是CSS样式表中一个非常重要的特性，它使得网页元素的边界不再局限于直角，而是可以呈现出更加柔和、自然的视觉效果。本文将深入探讨CSS圆角边框的原理以及如何在实际网页设计中应用。 一、CSS圆角...

    WEB2.0圆形边框css做法.rar

    以下是对"WEB2.0圆形边框css做法"的详细解析。 首先，CSS3引入了新的边框属性，如`border-radius`，这使得我们可以创建圆角边框，进而实现圆形元素。在CSS中，`border-radius`属性接受长度值，用来指定边框的圆角...

    老外用css实现圆角边框

    老外用css实现圆角边框，纯css，简单易懂，看了就明白

    css圆角边框相关知识和代码演示

    css圆角边框

    css实现圆角边框，不用图片

    一个用css实现的圆角边框实例，有兴趣的可以研究研究哦

    CSS 制作圆角边框.docx

    在CSS中制作圆角边框是一个长期困扰前端开发者的问题，特别是在早期，因为标准的CSS规范并不直接支持这个功能。然而，随着时间的推移，开发人员发明了各种技巧来实现圆角效果，即使在那些不完全支持CSS3的浏览器中。...

    CSS圆角边框

    "CSS圆角边框"是一个常见的需求，它使得网页元素的边框不再是传统的直角，而是具有平滑的圆形或弧形边缘，为网页带来了更现代、更友好的视觉效果。在给定的文件中，我们看到与“CSS圆角边框”相关的资源，如不同的...

    老外用纯CSS实现的圆角边框.rar

    当提到“老外用纯CSS实现的圆角边框”时，这通常指的是利用CSS技术来创建具有圆角的元素边框，而无需依赖图片或者其他图形元素。圆角边框在网页设计中很常见，因为它可以增加元素的视觉吸引力，使界面看起来更加现代...

    table 圆角 html5 css3

    此外，还需要注意的是，当表格的边框合并(`border-collapse: collapse`)时，相邻单元格的边框可能会互相抵消，导致圆角效果不明显。在这种情况下，可以尝试调整单元格的边框宽度，或者使用`box-shadow`来模拟圆角...

    WEB2.0圆形边框css做法.pdf

    标题提到的"WEB2.0圆形边框css做法"是指使用CSS样式来实现Web2.0风格的圆形或带有圆角的边框效果。以下是一些关于如何用CSS创建这种效果的知识点： 1. **边框半径（Border-radius）**: CSS3引入了`border-radius`...

Magicbox
Global site tag (gtag.js) - Google Analytics