`
biluo62
  • 浏览: 2141 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

css sprites之圆角

    博客分类：
  • css
csssprites 
阅读更多

第一步：创建我们的 Sprite
用PS等工具合成如图所示的图片（以一个像素的红线来区分）

第二部分:编写HTML代码

首先，我们会给容器 div 一个 .roundedBox类 :

<div class="roundedBox"></div>

现在，我们必须再增加四个div ，这会在将来创建圆角的时候用到。之后必须给每个加载一个类 .corner，同时也标识一个类来指定它们格子的位置。 


<div class="roundedBox">
    <strong>My content in roundedBox Type 1</strong>
    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

一切搞定? 嗯，让我们把注意力再转移到 CSS 代码上来。

第三部：编写CSS样式

绝对定位元素通常都依照相对定位的父元素进行定位。If this element is not defined, they will take as their parent relatively-positioned element, the body tag.如果这个父元素无法界定，那么它会去最近作相对定位的那个父元素，直至 body 标签。

让我们先来定义下所有的圆角

所有的圆角都必须定义绝对定位，并且注明高度跟宽度。 我的圆角定义的宽度跟高度都是 17px. 

 

.corner{position:absolute;width:17px;height:17px;}

 

现在开始定义 div 容器样式:

.roundedBox {position:relative;}

任何定义有类 .roundedBox 的元素内，绝对定位元素都会相对于这个元素进行定位，而不是标签 body。 我们也必须设置一些padding值，如果没有设置，圆角将会覆盖我们的文本，这肯定不是我们想要的效果。 重要提示: top 和 bottom padding 值必须 等价于圆角的 height。left 和 right padding 值必须等价于圆角的宽度。 正如您已经知道的，我的圆角宽度跟高度是相等的，因此，四个边角的padding 值也是相等的:

.roundedBox {position:relative; padding:17px; margin:10px 0;}

让我们对没有圆角作单独定义

我们会对每个圆角作绝对定位设置，并且定位背景图的位置 (根据我们的 sprite):


.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;} 
.topRight {top:0; right:0; background-position:-19px -1px;} 
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}


最后，给 #type1 匹配一个背景色，使之融合于 sprite 中的圆角:

#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}

全部的代码:

 


<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}
#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../image/corners.gif);}
</style>
</head>
<body>
<div class="roundedBox" id="type1">
    <strong>My content in roundedBox Type 1</strong>
    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>
</body>
</html>
分享到：
| CKEDITOR使用与配置
评论
发表评论

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

相关推荐

    CSS Sprites 圆角制作教程

    在本教程中，CSS Sprites被用来实现圆角效果，即将四个不同角度的圆角图像整合到一张图片中，通过CSS定位显示需要的部分。 【圆角制作】在CSS3之前，由于浏览器对CSS2.1标准的支持限制，创建圆角通常需要使用一些...

    CSS 使用Sprites技术实现圆角效果

    总结来说，CSS Sprites技术实现圆角效果的原理是通过合并多个图片到一张大图，并在CSS中精确控制每个元素的background-position和尺寸，最终利用背景图片来实现四个角的圆角效果。这样不仅减少了HTTP请求，还提高了...

    圆角层css.rar2009-9

    在描述中，“圆角层css.rar 圆角层 css 圆角层css角层css.rar 圆角层 css 圆角层css角层css.rar 圆角层 css 圆角层css”似乎出现了重复，这可能是由于输入错误或格式问题。不过，可以推断其核心内容是关于“圆角层...

    CSS高级技巧:CSS Sprites

    上一篇CSS教程文章：CSS高级技巧:圆角矩形CSS Sprites, 利用CSS background-position 进行背景绝对定位, 减少HTTP请求, 加速网页显示, 解决图片载入闪动问题的技巧.CSS Sprites最适合用来做的, 恩, 比如: 清单导航的...

    圆角-ie8.rar

    4. 如果使用了CSS Sprites，那么可能会有一个PNG图像文件，包含了所有圆角形状。 为了正确使用这些资源，你需要在你的项目中引用HTML、CSS和JavaScript文件，并确保在IE8环境下运行以查看效果。如果你遇到任何问题...

    圆角文本框的实现

    而在现代Web开发中，我们更倾向于使用CSS的`background-image`属性结合精灵图（CSS Sprites）或者单独的背景图片来实现类似效果。 另一方面，`index.html`是网页的主入口文件，它包含了网页的HTML结构以及可能内联...

    js倒圆角以及IE6png阴影的hack

    另外，还可以利用CSS精灵（CSS Sprites）技术来解决阴影问题。通过将阴影和主图合并成一个PNG图片，然后使用背景定位来显示不同部分，可以避免IE6的透明度问题。这种方法虽然可以解决阴影问题，但可能会增加图片的...

    jQuery插件之圆角插件.

    它利用了CSS3的border-radius属性，如果浏览器支持的话，或者回退到使用图片精灵（image sprites）或者内联SVG等其他技术来为不支持CSS3的旧版浏览器提供兼容性。这样，无论用户使用哪种浏览器，都可以享受到一致的...

    css手册html版正式下载

    13. **性能优化**：讲解如何编写高效的CSS，减少加载时间，提高页面性能，如合理组织CSS代码、利用CSS Sprites和避免使用@import等。 14. **浏览器兼容性**：讨论不同浏览器对CSS特性的支持情况，以及如何处理兼容...

    CSS设计指南.zip

    9. **CSS3新特性**：了解CSS3新增的特性，如圆角、阴影、渐变、多列布局、选择器扩展等。 10. **性能优化**：学习如何优化CSS代码，减少HTTP请求，避免使用@import，正确使用CSS Sprites，以及如何利用CSSnano和...

    圆角简单的博客模板_简单博客圆角蓝色标准.rar

    - **图像精灵（CSS Sprites）**：为了减少HTTP请求并提高页面加载速度，可能会将多个小图标合并到一个图像文件（如headerbg.gif）中，然后使用CSS的`background-position`属性来显示所需的图标部分。 - **响应式...

    css 开发手册.chm

    为了提高CSS性能，应遵循一些最佳实践，如减少选择器复杂度、避免使用通配符选择器、合理使用内联样式、利用CSS Sprites合并背景图像、利用`@import`谨慎引入外部样式等。同时，CSS优化还包括压缩代码、去除无用样式...

    css样式表及其调用

    - 减少HTTP请求：合并CSS文件，使用CSS Sprites减少图像请求。 - 使用minify工具压缩CSS，去除空格和注释，减小文件大小。 - 使用CSS预处理器和模块化方法（如BEM）提高组织效率，避免重复代码。 学习CSS并熟练...

    css书籍,布局大全和商业网站布局之道

    4. CSS3新特性：CSS3引入了许多新功能，如伪类和伪元素、过渡(transitions)、动画(keyframes)、阴影(shadows)、圆角(borders-radius)、多列布局(columns)等，这些都极大地扩展了CSS的表现力，使得网页设计更具动态性...

    CSS经验几则.rar

    9. **CSS3新特性**：CSS3引入了大量新特性，如圆角(border-radius)、阴影(box-shadow)、渐变(gradient)、多背景(multiple backgrounds)、选择器增强等，丰富了网页视觉效果。 10. **性能优化**：优化CSS可以提高...

    CSSAPI中文版.rar

    2. **CSS Sprites**: 合并小图片为一张大图，减少HTTP请求，提升加载速度。 3. **CSS minification**: 压缩CSS，删除空格、注释和不必要的字符，减小文件大小。 4. **外部CSS与内部CSS的选择**: 静态样式可考虑...

    55个极其精美的CSS网页模板

    学习如何减少CSS选择器的复杂性，合理组织CSS代码，以及使用CSS Sprites和数据URI等技巧，可以有效提升网站性能。 10. **浏览器兼容性**：虽然大部分现代浏览器对CSS3支持良好，但处理跨浏览器兼容性问题依然是设计...

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