本文參考《css揭秘》第二章。
一、半透明邊框
說起透明，肯定第乙個想到的是css3的hsla，寫個demo：
小tips：hsl色彩模式是工業界的一種顏色標準，是通過對色調(h)、飽和度(s)、亮度(l)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，hsl即是代表色調，飽和度，亮度三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。hsla是在hsl的基礎上增加乙個透明度(a)的設定。
h：hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍
/ 色，也可取其他數值來指定顏色。取值為：0 - 360
s：saturation(飽和度)。取值為：0.0% - 100.0%
l：lightness(亮度)。取值為：0.0% - 100.0%
a：alpha透明度。取值0~1之間。
從上面的demo中可以看出，雖然並沒有看到我們的邊框，但是實際上邊框是存在的，預設情況下，北京會延伸到邊框所在的區域下層。不信的話，我們可以
換個明顯的顏色。
第二個demo可以看出，我們所做的邊框並沒有讓body的北京從半透明白色邊框處透上來，而是在半透明白色邊框處透出了這個div自己的純白色背景。
·······因此我們引入乙個新的屬性：background-clip，此屬性規定了背景的繪製區域。預設是border-box。(詳細解釋請見
css3 background-clip 屬性)
完活！
二、多重邊框
1、box-shadow方案
提到多重邊框，首先應該想到的屬性應該就是box-shadow了，語法：
tips：
來規定。省略長度的值是 0。 （詳細解釋請見css3 box-shadow 屬性）
box-shadow支援逗號分隔語法，可以建立任意數量的投影，而且是層層疊加的。
先來乙個小demo：
此方案需注意：
內嵌還是外擴的）來額外模擬出邊框所需要佔據的空間。
2、outline方案
先來了解一下outline，
outline （輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
輪廓線不會佔據空間，也不一
定是矩形。該屬性的三個屬性值，分別代表：
（詳細解釋請見
css outline 屬性）
demo請戳
這個方案也有需要注意的幾點：
以上。
周一快樂！
關於用CSS處理邊框的屬性
今天是六一兒童節，也是我個人第一次寫部落格，若有缺漏，請多指教。css是一組格式設定規則，用於控制web頁面的外觀。通過使用css樣式設定頁面的格式，可將頁面的內容 與表現形式分離。頁面內容存放在html文件中，而用於定義表現形式的css規則則存放在另乙個檔案中或html文件的某一部分，通常為檔案頭...
用CSS為table新增邊框
在用css給 定義1畫素的邊框的時候，是個比較棘手的問題，在定義的時候，很容易把邊框定義重複了，很多人問過我這個問題，今天我把我為 新增的方法給大家，其實方法很簡單的，就是邏輯關係比較難懂。裡面的單元格都是四條邊的，那這單元格裡面的四條邊怎麼定義好呢？我們拿乙個只有四個單元格的 下面用1，2，3，4...
css用邊框實現圓角矩形
今天要做乙個圓角矩形的按鈕，於是直接找圓角矩形的css實現方式，搞了半天，雖然也實現效果了，但是很複雜，需要用很多 後來突然想到以前做過的乙個邊框效果，也是圓角矩形，於是找了出來，發現這種辦法相當簡單並且效果一點也不差，這裡簡要分享一下。關鍵部分都有注釋。html view plain copy h...