`
nubix
  • 浏览: 91095 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

用position做圆角边框

 
阅读更多

.green-round-new .head{

    position:relative;
    background:url("/images/r_m2.gif") repeat-x scroll 0 0 transparent; /*底图*/
    clear:both;
    height:26px;

    line-height:26px;
}

.green-round-new .head .left{
    background:url("/images/r_m1.gif") no-repeat scroll 0 0 transparent;/*左边*/
    left:0;
    padding-left:10px;
    line-height:26px;
    position:absolute;
}

.green-round-new .head .right{
    background:url("/images/r_m3.gif") no-repeat scroll top right transparent;/*右边*/
    right:0;
    padding-right:10px;
    line-height:26px;
    height:26px;
    position:absolute;
}

 

效果


 

 

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

相关推荐

    css 图片圆角边框的效果

    在创建圆角边框效果时,通常会使用一张带有圆角的边框图片,这张图片的四个角是透明的,以便露出背景或内容。 以下是创建图片圆角边框的基本步骤: 1. **创建边框图片**:设计一个PNG或GIF图片,包含四个圆角部分...

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

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

    jquery实现圆角边框

    jQuery 是一个广泛使用的 JavaScript 库,它提供了丰富的功能,包括帮助开发者轻松实现元素的圆角边框。本教程将深入探讨如何利用 jQuery 实现这一效果。 首先,我们需要理解 CSS3 的 `border-radius` 属性,它是...

    最简洁图片圆角边框-无需额外标签

    在传统的CSS中,我们通常会使用`border-radius`属性来为元素添加圆角边框。例如,如果想要一个图片的四个角都是圆形,我们可以这样写: ```css img { border-radius: 10px; /* 替换10px为所需的圆角大小 */ } ``` ...

    Android自定义Iphone风格的圆角边框开关按钮

    通过这种方式,我们成功地使用XML在Android中实现了Iphone风格的圆角边框开关按钮,无需使用图片资源。这种自定义方法具有高度的灵活性,可以根据项目的具体需求进行样式调整。同时,由于使用了XML,布局文件更易于...

    兼容IE6的图片圆角边框CSS

    本文将介绍如何使用CSS来实现图片圆角边框效果,并且兼容IE6。该实现原理非常简单,利用绝对定位,使一个背景为PNG图片的边框覆盖在原始图片上面。 首先,让我们来了解一下实现圆角边框的CSS代码: `.i_roundimg{ ...

    自定义标签实现圆角边框

    虽然示例代码提供了一种使用非标准标签和VML实现圆角边框的方法,但在实际项目中更推荐使用CSS3的标准属性`border-radius`来实现圆角效果。这种方式不仅简化了代码结构,还提高了代码的可读性和跨浏览器兼容性。此外...

    CSS拓展案例,包含定位,光标,圆角边框,透明度opacity,边框合并,焦点伪类选择器,属性选择器

    本案例涉及了多个核心CSS概念,包括定位、光标、圆角边框、透明度、边框合并以及焦点伪类选择器和属性选择器。让我们逐一深入探讨这些知识点。 1. **定位(Positioning)**:在CSS中,元素的位置可以通过`position`...

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

    CSS圆角边框的制作方法大致可以分为两类:一类是使用CSS3的border-radius属性,另一类是不使用border-radius属性。border-radius属性用于设置元素边框的圆角,语法简洁,易于实现。然而,由于某些老版本浏览器(如IE...

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

    虽然圆角边框在视觉上可以增加页面的柔和感和现代感,但在早期的CSS标准中,实现这一效果并不直观,往往需要借助复杂的技术或者使用大量的切图。随着CSS3的引入,这个问题得到了显著改善。本文将探讨如何使用CSS3来...

    CSS圆角阴影边框的实现.txt

    如果想要添加圆角边框,可以通过以下方式: ```css .portleth2 { border-radius: 5px; /* 可以设置不同的值以达到所需效果 */ } ``` ##### 2. 阴影效果 同样地,`box-shadow`属性可以用来为元素添加阴影。尽管在...

    javascript实现的圆角提示框

    例如,我们可以使用`border-radius`属性来创建圆角,`position`属性来定位提示框,以及`background-color`来设置背景色。 ```css .tooltip { position: absolute; background-color: #333; color: #fff; border...

    css3 支持ie8以下圆角

    - 使用渐进增强的策略,为不支持圆角边框的浏览器提供一个方形边框的备选样式。 - 使用SVG(Scalable Vector Graphics)图像作为背景,可以实现跨浏览器的圆角效果,但可能增加页面加载时间。 综上所述,实现CSS3...

    图片边框圆角光晕css控制

    在本话题中,我们将深入探讨如何使用CSS来实现图片边框的圆角光晕效果,这一效果能为网页增添独特且吸引人的视觉体验,无需依赖图像编辑软件如Photoshop。 首先,让我们了解CSS中与边框相关的属性。`border-radius`...

    CSS使用图片完美修饰的全兼容圆角框.rar

    在网页设计中,圆角边框是一个常见的需求,它能够为元素添加柔和的视觉效果,提升用户界面的美观度。然而,在CSS早期版本中,实现跨浏览器的圆角边框并非易事,尤其是在IE6-8等老版本浏览器中。本资源"CSS使用图片...

    css圆角提示框.zip

    首先,让我们深入了解CSS圆角边框。在CSS3中,`border-radius`属性是实现圆角的关键。它允许开发者为元素的每个角落设置不同的圆角半径,从而创造出各种形状的圆角效果。例如,如果你希望一个元素的四个角都具有相同...

    vml圆角,箭头(IE)

    通过创建四个VML形状(每个角一个),调整其形状和位置,使得它们组合起来形成一个具有圆角的矩形,从而模拟出圆角边框的效果。 三、箭头绘制 在CSS3中,可以使用伪元素`::before`和`::after`结合`content`属性和`...

    圆角框实现

    1. CSS边框图像(border-image)属性:CSS3引入了`border-image`属性,可以让我们使用图像来绘制边框,包括圆角边框。首先,你需要一个包含四个圆角的PNG或SVG图片。然后,设置`border-image-source`为该图像的URL,...

    CSS实现自适应的图片背景边框

    例如,创建一个带有圆角边框的自适应图片: ```css img { position: relative; overflow: hidden; } img::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-...

    解决IE浏览器图片圆角

    在这个时代,CSS3已经提供了圆角边框的解决方案,但对于那些仍然需要支持老版本IE浏览器的项目来说,就需要采用一些特殊的技术来模拟圆角效果。 在描述中提到的"解决在IE6-IE8浏览器图片的圆角问题",这暗示我们...

Global site tag (gtag.js) - Google Analytics