`
zuroc
  • 浏览: 1312127 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

2px圆角

阅读更多

是的,我们不得不去做圆角,虽然这是一种及其无聊的事情.

以前提到过一个网站,可以做纯html圆角

http://zsp.iteye.com/blog/227127

但是,这种圆角每一种背景色都要生成不同的html代码,很麻烦

于是,我发扬拿来主义,抠出了一个用2px gif遮蔽做出的圆角

这样不同的背景色就可以用同一套代码了,想要更大的圆角也简单,让美工把遮蔽图做大一点就是.


代码如下,下载见附件

_____________________________________________________________

<style>
.corner_tl{background:url(corner_tl.gif) no-repeat;}
.corner_br{background:url(corner_br.gif) no-repeat 100% 100%;}
.corner_tr{background:url(corner_tr.gif) no-repeat 100% 0;}
.corner_bl{background:url(corner_bl.gif) no-repeat 0 100%;}
</style>

<div style="margin:auto;width:10em;">

<div style="background-color:#eef;" class="corner_tl">
<div class="corner_tr">
<div class="corner_bl">
<div class="corner_br">

<p style="padding:1em;">zsp007@gmail.com</p>


</div></div></div></div>



1
2
分享到:
评论

相关推荐

    86px圆角导航.zip

    "86px圆角导航.zip" 正是这类资源的一个代表。这个压缩包中可能包含了多种设计状态的JPEG格式文件,这些文件可能是为了展示不同颜色方案、不同交互效果(如鼠标悬停、点击激活)而准备的。考虑到JPEG格式的广泛兼容...

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

    例如,如果我们希望一个 `div` 元素的所有边角都是 10px 的圆角,可以这样编写 CSS: ```css div { border-radius: 10px; } ``` 若要为不同角设置不同圆角半径,可以分别指定: ```css div { border-top-left-...

    让div圆角显示

    - `.r1` 至 `.r4` 分别设置了不同的左右边距,通过逐渐减少边距值(5px、3px、2px、1px),模拟出由宽到窄的圆角效果。 - `height: 1px` 和 `height: 2px` 控制每个子`&lt;div&gt;`的高度,结合`overflow: hidden`隐藏...

    js实现div、图片圆角效果

    超简单实用JS实现DIV、图片圆角效果 &lt;!--[if lte IE 9]&gt; &lt;script type="text/javascript" src="DD_roundies_0.0.2a.js"&gt;&lt;/script&gt; DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true)...效果2:小圆角&lt;/h3&gt;

    圆角矩形代码,HTML圆角矩形

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); ``` 需要注意的是,虽然大部分现代浏览器都支持CSS3的`border-radius`属性,但老版本的IE浏览器可能不兼容。在这种情况下,可以借助如jQuery的圆角插件来实现跨浏览器的...

    css+圆角总结

    例如,为一个div元素创建一个所有角都是10px的圆角效果: ```css div { border-radius: 10px; } ``` 二、CSS圆角区块容器 在创建圆角区块容器时,我们需要确保背景色或图片能够平滑地填充到圆角内。以下是一些...

    QT QDialog 圆角实现

    2. **透明背景**:为了让圆角效果更明显,我们可能希望QDialog背景透明。可以添加以下代码来实现透明效果: ```cpp dialog.setAttribute(Qt::WA_TranslucentBackground); ``` 3. **设置圆角**:接下来,我们需要...

    圆角框的制作

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); } ``` 此外,`background-color`和`background-image`属性可以用来设置背景色或图片,增强圆角框的视觉效果。对于透明背景,可以利用`border-color`定义边框颜色,使...

    jquery实现圆角实例

    2. 使用 jQuery 应用圆角效果: ```javascript $(document).ready(function() { $('.yourElementClass').corner('20px'); }); ``` 在这个例子中,`.yourElementClass` 是你想应用圆角效果的元素的类名,'20px' 是...

    用CSS样式定义的圆角表格

    margin: 0 2px; } b.rtopb.r4, b.rbottomb.r4 { margin: 0 1px; height: 2px; } ``` 这部分代码是实现圆角效果的核心。通过嵌套不同层级的`&lt;b&gt;`标签,并结合不同的边距和高度设置,模拟出了圆角的效果。例如...

    圆角矩形学习参考资料

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */ border: 1px solid #ccc; /* 添加边框 */ } ``` 最后,如果你想在网页中动态创建或改变圆角矩形,可以利用JavaScript来操作CSS样式。例如,使用...

    高光圆角阴影效果

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 255, 255, 0.3); } ``` 3. **高光**:为了模拟高光,我们可以使用线性渐变。在元素的顶部或底部添加一个从透明到白色的渐变,可以创造出光亮的...

    css_圆角矩形_CSS

    例如,如果我们希望创建一个宽度和高度都为200px,且所有角都有10px圆角的矩形,可以这样写: ```css .box { width: 200px; height: 200px; border-radius: 10px; } ``` 此外,`border-radius`还可以与盒模型的...

    简洁型css圆角矩形

    border-width: 2px;`:调整边距及边框宽度。 - `.b3,.b3b`:定义第三层边框。 - `margin: 0 2px;`:调整边距。 - `.b4,.b4b`:定义底部边框。 - `height: 2px; margin: 0 1px;`:增加高度并调整边距。 **2. ...

    超实用div圆角样式,无须图片

    在上述代码中,div的左上角半径为10px,右上角为20px,左下角为30px,右下角为40px,形成了不规则的圆角形状。 为了使这个圆角效果在所有现代浏览器中都能正常工作,我们需要添加一些浏览器特定的前缀。例如,对于...

    圆角实现的三种常规方法 图片 Div

    2. **CSS实现圆角** 随着CSS技术的发展,我们可以使用CSS来直接设置元素的边框为圆角。通过`border-top-left-radius`、`border-top-right-radius`、`border-bottom-left-radius`和`border-bottom-right-radius`这四...

    CSS 圆角示例详细教程

    border-radius: 10px 20px 30px 35px / 20px 25px 30px 40px; ``` 这种情况下,左边的值控制水平方向的半径,右边的值控制垂直方向的半径。 #### 四、示例代码 下面是一个具体的示例,展示了如何使用`border-radius...

    Css3圆角边框

    例如,如果我们想要创建一个宽度和高度都是200px,所有角都是10px圆角的矩形,可以这样写: ```css .box { width: 200px; height: 200px; border-radius: 10px; } ``` 除了基本的`border-radius`属性,还可以...

    圆角兼容所有浏览器方法

    2. **JavaScript 库**:对于不支持 CSS3 圆角的浏览器,如 IE7 及以下版本,可以使用 JavaScript 库来模拟圆角效果。这里介绍的库是 `curvycorners.js`。 #### 三、代码实现 ##### 1. 引入 curvycorners.js 首先...

Global site tag (gtag.js) - Google Analytics