收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > CSS/HTML > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

CSS 使用Sprites技術實現圓角效果

首先來簡單說一下什么是Sprites,Sprites是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網絡流行的速度而言,不高于200KB的單張圖片的所需載入時間基本是差不多的,所以無需顧忌這個問題。

第一步:創建我們的 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樣式

絕對定位元素通常都依照相對定位的父元素進行定位。如果這個父元素無法界定,那么它會去最近作相對定位的那個父元素,直至 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>

《CSS3實戰》筆記--漸變設計(一)
基于CSS的漸變與圖片漸變相比,最大的優點是便于修改,同時支持無級縮放,過渡更加自然。目前,實現CSS漸變的只有基于Webkit和Gecko引擎的瀏覽器,基

《CSS3實戰》筆記--漸變設計(二)
Gecko引擎的CSS漸變設計直線漸變基本語法-moz-linear-gradient([point||angle,]stop,stop[,stop]*)參數說明:point:定義漸變起始點,取值包含數值,百分比,也可以使用

《CSS3實戰》筆記--漸變設計(三)
IE瀏覽器引擎的CSS漸變實現方法IE并不支持CSS漸變,但是提供了漸變濾鏡,可以用來實現簡單的漸變效果。基本語法該參數的參數說明如下:enabled:設置

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
手游棋牌游戏运营
快乐十分玩法 湖北今天快三 最准特马公式 三分时时彩在线开奖 甘肃快3走势图今天 上海11选五基本走势 正版猛虎報神算神算子彩报 新疆时时彩走势图 福建时时官方网站 六宝典app下载不了 生肖乐走势图 福建快3开奖结果走势 四川时时app下载手机版下载安装 2019年歇后语1一153期资料 重庆农场app 内蒙古时时历史开奖号码