帶有CSS和JavaScript的圓角

 

   ＆nbsp;  內容進入這裡  ＆nbsp;       幾年前，這將是一個可以接受的解決方案。如今，這是一個醜陋的技巧：對於相對不重要的視覺裝飾來說，這是一個可怕的多餘標記。實際上，上述代碼甚至在使用嚴格的Doctype提供的文檔中都無法正常運行 - 由於圖像是內聯元素，因此在“ y'和'j”等字母上的“尾巴”的圖像下，將出現在角落圖像下方的小差距。如埃里克·邁耶（Eric Meyer）在圖像，表和神秘差距中所解釋的那樣，該解決方案是將以下規則添加到您的樣式表中：

>

td img { display: block; }

這會產生所需的結果，如下所示。

>

>但是，現在我們正在使用CSS hacks修復醜陋的桌子黑客！讓我們看一下僅使用CSS實現相同效果的方法。

作為一般規則，任何裝飾映像都應在現有頁面元素上作為CSS背景圖像實現，而不是使用 tag將其列入頁面。很容易確定圖像是裝飾性還是包含實際內容：問問自己是否缺少圖像會對頁面的整體內容產生任何影響。在圓角的情況下，答案顯然不是。

> CSS背景圖像非常有力。您只需要查看CSS Zen Garden上展出的許多精彩設計，以證明這一點。使用CSS，可以將背景圖像應用於頁面上的任何元素。此外，它可以水平，垂直或根本不重複；它可以使用絕對測量值將其放置在圖像的背景區域內，也可以相對於四個角落之一。甚至可以在元素的內容捲軸上保持固定位置。不幸的是，CSS 2施加了一個小而顯著的限制：您只能在頁面上的每個元素上應用一個背景圖像。要正確渲染

上的圓角，我們需要應用四個背景圖像，一個在每個角落。

固定寬度框

如果我們要應用裝飾角的盒子的寬度已固定，則已經解決了一半的問題。如果我們知道盒子始終是200像素寬，而不是創建四個背景圖像（一個用於每個角落），我們可以創建兩個：一個：一個用於框的頂部，一個用於底部。現在，挑戰減少為將兩個背景圖像應用於我們的

。是時候利用我們的標記了。 > 如果不包含任何內容，那麼一個帶有圓角的盒子就不會很有趣。考慮以下內容：

td img { display: block; }

非常簡單，是嗎？盒子的標題以

的形式生存（我假設

和

已經在頁面的層次結構上進一步使用），隨後的內容是段落和無序列表。解決我們的兩個背景問題的關鍵在於

，它位於盒子的頂部。我們要做的就是將背景圖像應用於

的頂部，而將背景圖像應用於包含的

的底部，並且效果已完成：

>

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

單擊此處查看結果。

結構良好的文檔通常充滿了類似的鉤子，可以仔細利用這些鉤子以應用多個背景並實現特定的視覺效果。學習識別它們是與CSS合作的重要組成部分。

嵌套元素

>將四個背景應用於一個Div仍然是我們無法觸及的。但是，如果我們嵌套了四個div，一個針對每個背景怎麼辦？這樣做可以解決我們的問題，但以額外的標記為代價而沒有結構性價值：

，在CSS中：

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

代碼顯示如下所示。

>應該很清楚這裡發生了什麼。四個div中的每一個分別分別位於右上角，左上，右下和底部左側的圓角背景圖像。雖然包含DIV的寬度設置為200px，但它可以很容易地將其設置為更靈活的液體設計 - 無論corlers div的大小或小的大小。

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

>我們現在可以解決該問題，該問題的標記比原始表示例要少得多。但是，它仍然並不完美：它使用了三個額外的divs，這對整體文檔結構沒有任何價值。我們可以做得更好嗎？是時候看javaScript了。

>

使用DOM

使用JavaScript和DOM，可以在瀏覽器加載文檔後操縱文檔的結構。圓角是一種呈現效果，可以從非JavaScript用戶代理中隱藏起來，而不會顯著降低其網站的整體經驗，因此使用JavaScript進行這種轉換沒有道德問題。我們的最終解決方案將在源文檔中只需要一個

。我們將使用JavaScript動態地添加圓角效果所需的三個外部div。 這是標記：

td img { display: block; }

>我認為您會同意，除了在結構上可以更好地定義為段落的內容，我們不可能做的要比這更簡單的事情，除非

將

交換為

。使此開關作為讀者的練習。

現在是JavaScript：

腳本分為兩個邏輯部分。第一部分在文檔中的所有

元素上迭代，構建一個在其類屬性中包含“圓形”的數組（請記住，請記住，元素可以具有由空格分隔的多個類）。腳本的第二部分依次通過這些元素，創建了另外三個divs並將其包裹在原始元素上。讓我們更詳細地看一下代碼：>

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

>在這裡，我們完全從原始

中刪除了“圓形”的類。 CSS的原因將變得清晰。本質上，我們不希望使用原始樣式來影響該元素。 >

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

我們已經創建了最外部

，該

將用於應用最高右側的背景圖像以及盒子的整體寬度。請注意，我們將課程設置為“ Rounded2”；這將在我們的CSS中定義，與向非JavaScript客戶提供的“圓形”類有細微的差異。 >

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

> W3C DOM不提供直接的方法，可以用另一個節點替換文檔中的節點。取而代之的是，您必須使用節點的替換方法（）方法來替換另一個節點的孩子。替換您要查看的節點的一個有用技巧是使用parenthnode屬性訪問自己的父，然後使用 /#c#.replacechild將其交換為其他東西。如果那對您沒有意義，請不要擔心 - 只想將上述行替換為我們剛剛創建的新tr節點替換我們的原始節點。

>

div.rounded { 
  width: 200px; 
  background: #1b5151 url(tr.gif) no-repeat top right; 
} 
div.rounded div { 
  background: transparent url(tl.gif) no-repeat top left; 
} 
div.rounded div div { 
  background: transparent url(br.gif) no-repeat bottom right; 
} 
div.rounded div div div { 
  background: transparent url(bl.gif) no-repeat bottom left; 
  padding: 15px; 
}

>現在，我們創建了三個新的

元素，並將它們插入文檔中。剩下的就是重新插入我們的原始節點，其中包含其內容：>

td img { display: block; }

在這一點上，我們的實際文檔樹幾乎與上面的四個嵌套

示例相同，唯一的區別是外部元素具有“ rounded2”類，而不是“圓形”。這是CSS：

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

這是結果。

對於Div.Rounded，僅在不執行JavaScript的瀏覽器中使用了第一組規則。請注意，寬度為170px和填充15px，總寬度為200px（寬度以及左右填充）。如果您需要在IE 5/Windows中使用，該Windows以不同的方式解釋填充值，則需要應用臭名昭著的框模型黑客。您已經在上一個示例中看到了第二組規則。

>

向前看

上述技術將在所有現代瀏覽器以及支持CSS2和DOM 2標準的所有未來瀏覽器中起作用。 CSS 3引入了許多新方法來實現此效果，這將使上述技術過時。除了本地圓角支撐（在Mozilla的瀏覽器家族中已經可用）CSS具有功能強大的::外部偽元素，它允許以類似於本文顯示的JavaScript示例的方式插入其他樣式元素。如果這還不夠，邊界圖像將允許您想想的幾乎所有邊界裝飾。 >

不幸的是，CSS 3支持可獲得的幾年。在此之前，JavaScript具有佔用一些鬆弛的能力。

經常詢問有關CSS和JavaScript圓角的問題（常見問題解答）

>如何使用CSS創建圓角？您可以使用“ Border-Radius”屬性來實現這一目標。 “邊境 - 拉迪烏斯”屬性可以具有一個，兩個，三個或四個值。單個值將對所有四個角都施加相同的半徑。兩個值將在左上角和右下角施加第一個半徑，第二個半徑是右上角和左下角的第二個半徑。三個值將把第一個半徑應用於左上角，第二個半徑將其應用於右上和左下，第三個半徑是右上方的。四個值將以左上角，右上角，右下，左下角的順序應用不同的半徑。

>我可以使用JavaScript？

>是的，您可以使用JavaScript創建圓角，儘管為此目的使用CSS更常見。如果您需要根據用戶輸入或其他因素動態創建圓角，那麼JavaScript可能是更好的選擇。您可以使用“ CanvasRenderingContext2D.RoudeRect（）”方法來繪製畫布上帶有圓角的矩形。該方法採用五個參數：矩形上左上角的X和Y坐標，矩形的寬度和高度以及角落的半徑。

>

>如何使用CSS？

如何創建一個圓圈，用CSS創建一個圓形的圓圈，是創建圓形圓頂的特殊情況。如果將“ Border-Radius”屬性設置為50％，則角落將足夠圓形以形成一個圓圈。該元素還需要具有相等的寬度和高度。例如：

> div {

寬度：100px;

身高：100px;

border-radius：50％;

} } }
>
這將創建一個是一個完美的圓圈。通過指定“ Border-Radius”屬性的不同值來元素。例如，要僅繞div的左上角和頂部右上角，您將使用：
div {
border-radius：10px 10px 0 0;
} }
}

角落。

如何用圓角創建邊框？

>用圓角創建邊框就像創建一個用圓角創建元素一樣容易。您只需將“ Border-Radius”屬性應用於帶邊框的元素即可。例如：

> div {
邊界：1px固體黑色;
border-radius：10px;
}

}

>

>
> >>
>>
>>
與1px黑色邊界和圓角創建一個div，並用10px Radius。通過指定“ Border-Radius”屬性的不同值，在同一元素上具有不同的半徑的角落。例如，要在左上角創建一個具有10px半徑的DIV，右上角和左下角的20px半徑為20px半徑，在右下角的拐角處有30px半徑，您將使用：

>

div {

{
{
{
border-radius：10px 20px 20px 20px 30px 30px; CSS？

是的，您可以通過指定“ Border-Radius”屬性中每個角的兩個值來創建CSS的橢圓角。第一個值是水平半徑，第二個值是垂直半徑。例如： div { border-radius：10px 20px;} > 這將創建一個帶有橢圓角的div，水平半徑為10px，垂直半徑為20px。

我可以對“ Border-radius”屬性進行動畫嗎？例如，要在2秒內逐漸將邊界半徑從0更改為5％，您可以使用：

div {
border-radius：0;
過渡：border-radius 2s;
}
}
}




div：當您懸停在它上時變成圓形，並且更改將在2秒內逐漸發生。

我可以使用百分比作為“ Border-radius”屬性嗎？該百分比相對於元素的相應維度。例如，如果您將“邊界 - 拉迪烏斯”設置為50％，角落將被足夠圓形以形成一個圓圈（或橢圓形，如果元素的寬度和高度不相等）。

>我可以在圖像上創建圓角嗎？

是的，是的，您可以在圖像上創建圓角，通過將圖像塗在“ border-Border-element the'Border-element to of the'border-element of the'border-element of the'border-element to the''屬性上。對於縮略圖或個人資料圖片，這可能是一個很好的效果。例如：

img {
border-radius：10px;
}

>這將在所有圖像的角度上應用10px半徑。

>

以上是帶有CSS和JavaScript的圓角的詳細內容。更多資訊請關注PHP中文網其他相關文章！