首頁 > 文章 > web前端 > CSS 使用Sprites技術實現圓角的效果

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

不言原創: 2018-06-28 11:17:392029瀏覽

這篇文章主要介紹了關於CSS 使用Sprites技術實現圓角的效果，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

使用CSS Sprites技術畫圓角，簡單的講就是把一個圓做在一張圖上，定義4個p，每個p取圖的一個角做背景，下面看具體實作方法。

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

第一步：創建我們的Sprite

用PS等工具合成如圖所示的圖片（以像素的紅線來區分）

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

第二步：寫HTML程式碼

#首先，我們會給容器p 一個.roundedBox類別:

<p class="roundedBox"></p>

現在，我們必須再增加四個p ，這會在將來創建圓角的時候使用。之後必須給每個載入一個類別 .corner，同時也標識一個類別來指定它們格子的位置。

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

第三步：寫出CSS樣式

絕對定位元素通常都會依照相對定位的父元素進行定位。如果這個父元素無法界定，那麼它會去最近作相對定位的那個父元素，直到 body 標籤。

讓我們先來定義下所有的圓角

所有的圓角都必須定義絕對定位，並且註明高度跟寬度。我的圓角定義的寬度跟高度都是17px.

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

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

現在開始定義p 容器樣式:

.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>
<p class="roundedBox" id="type1">
    <strong>My content in roundedBox Type 1</strong>
    <p class="corner topLeft"></p>
    <p class="corner topRight"></p>
    <p class="corner bottomLeft"></p>
    <p class="corner bottomRight"></p>
</p>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

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

相關文章