`
monlyu
  • 浏览: 52314 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

CSS制作圆角边框

阅读更多
#xsnazzy h1,#xsnazzy h2,#xsnazzy p {
	margin: 0 10px;
	letter-spacing: 1px;
}

#xsnazzy h1 {
	font-size: 2.5em;
	color: #fff;
}

#xsnazzy h2 {
	font-size: 2em;
	color: #06a;
	border: 0;
}

#xsnazzy p {
	padding-bottom: 0.5em;
}

#xsnazzy h2 {
	padding-top: 0.5em;
}

#xsnazzy {
	background: transparent;
	/*margin: 1em;*/
}

.xtop,.xbottom {
	display: block;
	background: transparent;
	font-size: 1px;
}

.xb1,.xb2,.xb3,.xb4 {
	display: block;
	overflow: hidden;
}

.xb1,.xb2,.xb3 {
	height: 1px;
}

.xb2,.xb3,.xb4 {
	border-left: 1px solid #08c;
	border-right: 1px solid #08c;
}

.xb1 {
	margin: 0 5px;
	background: #08c;
}

.xb2 {
	margin: 0 3px;
	border-width: 0 2px;
}

.xb3 {
	margin: 0 2px;
}

.xb4 {
	height: 2px;
	margin: 0 1px;
}

.xboxcontent {
	display: block;
	border: 0 solid #08c;
	border-width: 0 1px;
}



<!-- 调用上述的CSS -->

<div id="xsnazzy">
      <b class="xtop">
        <b class="xb1"></b>
        <b class="xb2"></b>
        <b class="xb3"></b>
        <b class="xb4"></b>
      </b>
      <div class="xboxcontent">
	    <h1>欢迎到首页</h1>
 		<br /><br /><br /><br /><br />
 		<a href="index2.php">跳转</a>
       </div>
       <b class="xbottom">
	  <b class="xb4"></b>
          <b class="xb3"></b>
          <b class="xb2"></b>
          <b class="xb1"></b>
        </b>
</div>
分享到:
评论

相关推荐

    CSS 制作圆角边框.docx

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

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

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

    CSS圆角边框制作代码

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

    CSS3圆角边框.docx

    【CSS3圆角边框】知识点详解 CSS3的圆角边框是现代网页设计中的一个重要特性,它允许开发者无需依赖图像,即可实现元素的圆角效果,从而提高页面性能和减少维护工作量。以下是对CSS3圆角边框的详细讲解: 1. **CSS...

    css教程制作css圆角边框(兼容全部浏览器)

    在本教程中,我们将使用 CSS 来制作圆角边框,兼容全部浏览器。下面是实现代码: 首先,我们定义了一个包含圆角边框的容器元素 `&lt;div&gt;`,并使用 CSS 来设置其样式: ```css .w300 { width: 300px; margin: 0 4px;...

    div+css圆角边框的制作

    总的来说,掌握 `div+css` 制作圆角边框的技术是网页设计师必备的技能之一。通过灵活运用 `border-radius`,我们可以创建出各种美观且符合设计需求的圆角元素,提升网页的视觉吸引力和整体设计感。同时,了解并解决...

    超简单!使用CSS制作圆角表格 3步搞定

    其中,制作圆角表格是一项常见的需求,尤其在追求现代感与用户友好体验的设计中。本文将详细介绍如何通过简单的三步骤,利用CSS来实现圆角表格的制作。 ### 第一步:设置基本CSS样式 首先,我们需要定义一些基本的...

    CSS圆角制作器 v1.0

    随着技术的发展,CSS3的引入带来了诸多新特性,其中圆角边框便是其中之一。CSS圆角制作器 v1.0 是一个专门用于生成CSS圆角样式的在线工具,它简化了设计过程,使得创建具有圆润边缘的网页元素变得轻而易举。 **一、...

    CSS制作圆角效果

    这个属性允许我们将元素的边框转换为圆形或椭圆形,从而实现圆角效果。`border-radius`的语法相当直观,可以单独对每个角落设置值,也可以统一设置所有角落: ```css element { border-radius: top-left top-right...

    CSS3圆角边框和边界图片效果实例

    CSS3圆角边框和边界图片效果实例这篇文档主要讲解了CSS3中的圆角边框效果、盒阴影效果以及如何通过图片制作边框的技巧。这些知识点在现代网页设计中非常实用,能够让网页的边框设计更加丰富和有创意。下面是对这些...

    Css3圆角边框制作代码

    在介绍如何制作css3圆角边框之前,首先要说明的是,border-radius属性在主流浏览器中已经得到了广泛支持。然而,在早期的浏览器中,如Firefox和Safari,为了实现这一功能,需要使用它们各自的私有属性。对于Firefox...

    CSS Sprites 圆角制作教程

    由于CSS3的圆角边框(border-radius)属性尚未全面支持,该教程采用的是CSS2.1兼容的解决方案,确保W3C验证的有效性。 在【步骤】中: 1. **创建Sprite**:使用编辑器(如Fireworks)创建并切割圆角图片,然后将四...

    Jquery实现圆角边框效果的源码

    需要注意的是,随着浏览器对CSS3的支持度不断提高,现在大多数情况下,我们可以直接使用CSS3的`border-radius`属性来实现圆角边框,这种方式更简洁且性能更好。但是,对于还需要兼容老版本浏览器的项目,jQuery ...

    CSS3 jQuery圆角边框的垂直图片滚动代码.rar

    在本项目中,CSS3被用来实现圆角边框,这是通过`border-radius`属性来完成的,它可以为元素的每个角落设定不同的圆角半径,创建出平滑的圆形或椭圆形边缘。 【jQuery】 jQuery是一个快速、简洁的JavaScript库,简化...

    html5+css3圆角图文展示卡片层叠滑动切换特效.zip

    在圆角图文展示卡片中,CSS3的圆角边框(border-radius)属性被广泛使用,以创建平滑的矩形或圆形边缘。此外,层叠效果可能涉及到CSS3的过渡(transition)和动画(animation)属性,使得卡片在切换时有平滑的过渡...

    border-radius以外的CSS圆角边框制作方法

    CSS3的border-radius利用DIV+CSS生成圆角边框,在很多情况下都会用到,目前DIV+CSS的圆角边框,一种是利用CSS3,一种是利用布局模拟出圆角。 先说第一种,利用CSS3,前提是您的浏览器必须支持CSS3,Firefox3是支持的...

    CSS圆角边框制作指南与实例

    在CSS中制作圆角边框曾经是一个挑战,因为早期的CSS规范并未提供直接的解决方案。然而,随着CSS3的引入,这个问题得到了很好的解决。本文将详细介绍如何使用纯CSS代码实现圆角边框,并通过实例来展示这一过程。 ...

Global site tag (gtag.js) - Google Analytics