css solid什麼意思-css教學-PHP中文網

首頁

web前端

css教學

css solid什麼意思

anonymity

May 28, 2019 am 11:06 AM

css

Border（畫邊框），它是CSS的屬性，用它可以給能確定範圍的HTML標記（如TD、DIV等等）畫邊框，可以給文字加邊框，給導航選單加分隔線，以下與大家分享個實例，有興趣的朋友可以了解下

製作過網頁的人都有為畫線而煩惱的經歷，先來認識一下「Border」（畫邊框），它是CSS的一個屬性，用它可以給能確定範圍的HTML標記（如TD、DIV等等）畫邊框，它可以定義邊框線的類型、寬度和顏色，利用這個特性，可以製作一些特殊效果。

css solid什麼意思

style="border:thin solid red"

「border」後面的三個參數的意思是：邊框線的寬度是：thin（細線）；邊框線的類型：solid（實線）；邊框線的顏色：red（紅色）。

邊框線的寬度有三個標準值：thin（細線）、medium（中粗線）和thick（粗線），

1、為文字加邊框

在上面的範例中，在一段文字中加上了不同的邊框，只是為了說明邊框線的顏色、粗細是可變的。

第一個邊框的CSS程式碼是：style="border:thin solid red"；

「border」後面的三個參數的意義是：邊框線的寬度是：thin （細線）；邊框線的類型：solid（實線）；邊框線的顏色：red（紅色）。

邊框線的寬度有三個標準值：thin（細線）、medium（中粗線）和thick（粗線），

此外，也可以自訂寬度，如： 1pt、5px、2cm等。

邊框線的類型有九個確定值：none（無邊框線）、 dotted（由點組成的虛線）、 dashed（由短線組成的虛線）、 solid（實線）、 double（雙線，雙線寬度加上它們之間的空白部分的寬度就等於border-width定義的寬度）、 groove（3D溝槽狀的邊框）、 ridge（3D脊狀的邊框）、 inset（3D內嵌邊框，顏色較深）、 outset（3D外嵌邊框，顏色較淺），

注意：如果系統不支援這些邊框的屬性值，那麼“dotted”、“dashed”、“double”、“ groove」、「ridge」、「inset」和「outset」都會被「solid」取代。

邊框線的顏色：可用十六進位的顏色代碼，例如#00ffcc。

從上面可以看出，給文字加上邊框確實很簡單，上例中後面那幾個邊框的設置，我不講你也明白了吧！這裡告訴你一點小技巧，給一段文字加邊框，可把CSS加在〈P〉標記裡；給幾段文本加邊框，先把那幾段文本用DIV標記括起來，再把CSS加在〈 DIV〉標記裡；若是要給一行文字加上幾個不同的邊框，則需要把文字放在表格裡，再把CSS分別加到〈TD〉標記裡。

2、給導航選單加分隔線

上面這個例子中的小白線，當然可以用圖象來做，但我在這裡是用CSS的「border」的擴展屬性畫了邊框的一條邊，這樣程式碼要少的多。畫邊框的單邊與上例的邊框的四條邊類似，一個邊框的四條邊的屬性如下：

邊框線名稱：border-top（上邊框線）、border-right（右邊框線)、border-bottom（下邊框線）和boder-left（左邊框線）；每條邊框線的類型、寬度和顏色的值與「boder」屬性相同。如本例要定義每個單元格的左邊框線為白色線，線的寬度為「1px」的實線，則CSS程式碼是這樣的：style="border-left: 1px solid #ffffff"。

在單獨定義邊框線時，若不給予某個值，那就取其預設的初始值。在dreamweaver中定義CSS非常方便，不用寫程式碼；把常用的邊框線一次定義好，放在外連式CSS檔案中，要用時呼叫一下就行了，非常方便。

3、在一個邊框中採用不同寬度和顏色的邊框線

在本例中的效果，當然可以用上例中的方法來實現，但那樣程式碼過多，可採用另一種合併的方法，把四條邊的屬性值分類放在一起，如本例的程式碼是這樣的：

style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。

從上面可以看出，我把邊框線的類型、寬度和顏色歸類在一起定義了，這裡請注意幾點：

一、四條邊框線的位置順序是：上邊框線、右邊框線、下邊框線、左邊框線；

#二、我在本例中邊框線的類型只取了一種實線類型，實際上四條邊也可以分別定義不同的類型；

三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值，则其余三个自动取相同值，如：border-style:solid与border-style:solid solid solid solid的效果完全一样；如果仅给出两个或三个值，那么缺失边的属性值把取与对边相同的值。如：boder-width:thin thick与border-width:thin thick thin thick效果相同，border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。

Border属性的灵活应用，可以产生许多特殊效果，方法与上面介绍的相同。

例子：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>一列固定宽度——</title> 
<style type="text/css"> 
<!-- 
#layout { 
border: 2px solid #A9C9E2; 
background-color: #E8F5FE; 
height: 200px; 
width: 300px; 
} 
--> 
</style> 
</head> 
<body> 
<div id="layout">hfhfg</div> 
</body> 
</html>

以上是css solid什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn