2. 程式人生 > >徹底搞明白：CSS3圓角使用

徹底搞明白：CSS3圓角使用

阿新 • • 發佈：2019-01-31

引言

web開發中使用css對頁面進行排版佈局，CSS3是層疊樣式表（Cascading StyleSheet）語言的最新版本，它的一大優點就是支援圓角。本文根據實際專案開發經驗，對border-radius進行詳細講解。

CSS3 border-radius使用

一、CSS3圓角的優點

傳統的圓角生成方案，必須使用多張圖片作為背景圖案。CSS3的出現，使得我們再也不必浪費時間去製作這些圖片了，而且還有其他多個優點：

　　* 減少維護的工作量。圖片檔案的生成、更新、編寫網頁程式碼，這些工作都不再需要了。

　　* 提高網頁效能。由於不必再發出多餘的HTTP請求，網頁的載入速度將變快。

* 增加視覺可靠性。某些情況下（網路擁堵、伺服器出錯、網速過慢等等），背景圖片會下載失敗，導致視覺效果不佳。CSS3就不會發生這種情況。

二、border-radius屬性

CSS3圓角只需設定一個屬性：border-radius（含義是"邊框半徑"）。你為這個屬性提供一個值，就能同時設定四個圓角的半徑。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

1、border-radius: 15px;

這條語句同時將每個圓角的"水平半徑"（horizontal radius）和"垂直半徑"（vertical radius）都設定為15px。

2、border-radius可以同時設定1到4個值。如果設定1個值，表示4個圓角都使用這個值。如果設定兩個值，表示左上角和右下角使用第一個值，右上角和左下角使用第二個值。如果設定三個值，表示左上角使用第一個值，右上角和左下角使用第二個值，右下角使用第三個值。如果設定四個值，則依次對應左上角、右上角、右下角、左下角（順時針順序）

　　border-radius: 15px 5px;

　　border-radius: 15px 5px 25px;

　　border-radius: 15px 5px 25px 0px;

（左下角的半徑為0，就變成直角了。）

3、border-radius還可以用斜槓設定第二組值。這時，第一組值表示水平半徑，第二組值表示垂直半徑。第二組值也可以同時設定1到4個值，應用規則與第一組值相同。

　　border-radius: 15px 5px / 3px;

　　border-radius: 15px 5px 25px / 3px 5px;

border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;

三、單個圓角的設定

除了同時設定四個圓角以外，還可以單獨對每個角進行設定。對應四個角，CSS3提供四個單獨的屬性：

　　* border-top-left-radius

　　* border-top-right-radius

　　* border-bottom-right-radius

　　* border-bottom-left-radius

這四個屬性都可以同時設定1到2個值。如果設定1個值，表示水平半徑與垂直半徑相等。如果設定2個值，第一個值表示水平半徑，第二個值表示垂直半徑。

　　border-top-left-radius: 15px;

　　border-top-left-radius: 15px 5px;

四、瀏覽器支援

IE 9＋、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支援上述的border-radius屬性。早期版本的Safari和Chrome，支援-webkit-border-radius屬性，早期版本的Firefox支援-moz-border-radius屬性。

（注意：border-radius必須放在最後宣告，否則可能會失效。）

另外，早期版本Firefox的單個圓角的語句，與標準語法略有不同。

　　-moz-border-radius-topleft（標準語法：border-top-left-radius）

　　-moz-border-radius-topright（標準語法：border-top-right-radius）

-moz-border-radius-bottomleft（標準語法：border-bottom-left-radius）

-moz-border-radius-bottomrigh（標準語法：border-bottom-right-radius）

五、注意事項

雖然各大瀏覽器都支援border-radius，但是在某些細節上，實現都不一樣。當四個角的顏色、寬度、風格（實線框、虛線框等）、單位都相同時，所有瀏覽器的渲染結果基本一致；一旦四個角的設定不相同，就會出現很大的差異。

　　border-color: black;

　　border-style: solid dashed;

　　border-width: 1px 2px 3px;

　　border-top-color: red;

　　border-radius: 5%;

另外，並非所有瀏覽器，都支援將圓角半徑設為一個百分比值。因此，目前最安全的做法，就是將每個圓角邊框的風格和寬度，都設為一樣的值，並且避免使用百分比值。

CSS3 border-radius 瀏覽器相容

CSS3 border-radius可以輕易實現圓還有圓角效果，然而，需要IE9+瀏覽器才行。移動端自然不成問題，但是眾多（尤其面向C側）PC頁面是至少需要相容IE8的，那有沒有什麼辦法可以讓IE7, IE8也支援圓角呢？

讓低版本IE支援CSS3圓角屬性的工具有很多，如DD_roundies：http://www.dillerdesign.com/experiment/DD_roundies/、curved-corner：http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser、ie-css3.htc等。

本文要展示的這個方法名為PIE，這裡PIE實際上是指的是一個名為pie的htc檔案，即pie.htc（http://css3pie.com/）。使用CSS的behavior行為，可以呼叫此檔案，然後讓IE也能實現一些常見的CSS3效果，這些CSS3效果實現是藉助於VML，如圓角(border-radius)，盒陰影(box-shadow)，背景漸變(gradient)，多圖片背景(multiple background images)、邊框圖片(border-image)等。

一、相關概念理解

1、behavior屬性語法：

behavior:url(url)|url(#objID)|url(#default#behaviorName)  

取值：

url(url)　:　使用絕對或相對url地址指定DHTML行為元件（.htc）

url(#objID)　:　用二進位制實現DHTML行為，#objID為object物件指定的id特性

url(#default#behaviorName)　:　IE的預設行為。由行為的名稱標識(#behaviorName)指定

說明：設定或檢索物件的DHTML行為。多個行為之間用空格隔開。對應的指令碼特性為behavior。

示例：

  1. div{behavior:url(fly.htc) url(shy.htc);}  

  2. div{behavior:url(#myObject);}  

  3. p{behavior:url(#default#download);}  

2、htc：

從5.5版本開始，Internet Explorer（IE）開始支援Web 行為的概念。這些行為是由字尾名為.htc的指令碼檔案描述的，它們定義了一套方法和屬性，程式設計師幾乎可以把這些方法和屬性應用到HTML頁面上的任何元素上去。Web 行為是非常偉大的因為它們允許程式設計師把自定義的功能“連線”到現有的元素和控制元件，而不是必須讓使用者下載二進位制檔案（例如ActiveX 控制元件）來完成這個功能。Web 行為還是推薦的擴充套件IE物件模型和控制元件集的方法。.htc檔案其實就是個指令碼檔案，與js檔案屬於同一類，只是htc是Internet Explorer(IE)的私生子，只有IE才認它。

3、VML：

VML是The Vector Markup Language(向量可標記語言)的縮寫。VML用於將圖形資料向量化的標記語言。這是一種基於 XML 語法的語言，由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相當於IE裡面的畫筆，能實現你所想要的圖形，而且結合指令碼，可以讓圖形產生動態的效果。IE私生子htc加上IE私有畫筆VML就可以實現一些IE專有的圖形與表現了，正好可以就此實現一些IE不支援的CSS3效果。

二、Pie.htc使用步驟（官網）：

Step 1: Download it

Download the PIE distribution and unzip it somewhere.

Step 2: Upload it

Upload the contents of the unzipped package to a directory on your web server. It doesn't matter where exactly, as long as you know where it is.

Step 3: Write some CSS3

Assuming you already have a HTML document, let's say you want to give one of its elements rounded corners. Create a CSS rule for that element and give it a border-radius style like so:

#myAwesomeElement {

    border: 1px solid #999;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

}

(Note the -webkit- and -moz- prefixed versions; these are necessary to make the rounded corners work in WebKit and Mozilla-based browsers.)

Step 4: Apply PIE

In that same CSS rule, add the following style line:

behavior: url(path/to/pie_files/PIE.htc);

Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.

Step 5: View it in IE

If all went well, at this point you should be able to load the page in IE and see the CSS3 rounded corners rendered just like other browsers. 

三、pie.htc方法並不是萬能的，也有一些侷限性和需要注意的地方

1. z-index相關問題
IE下這些CSS3效果實現是藉助於VML，由VML繪製圓角或是投影效果的容器元素，然後這個容器元素作為目標元素的前兄弟節點插入，如果目標元素position:absolute 或是 position:relative，則這個css3-Container元素將會設定與之一樣的z-index值，在DOM tree中，同級的元素總是後面的覆蓋前面的，所以這樣就實現了覆蓋，又避免了可能有其他元素正好插入其中。

所以，問題來了，如果目前元素的position屬性為static，也就是預設屬性，則z-index屬性是沒有用的，無覆蓋可言，所以此時IE瀏覽器下CSS3的渲染是不會成功的。要解決也很簡單，設定目標元素position:relative或是設定祖先元素position:relative並賦予一個z-index值（不可為-1）。

2. 相當路徑的問題
IE瀏覽器的behavior 屬性是相對於HTML文件而言的，與CSS其他的屬性不一樣，不是相對於CSS文件而言的。這使得使用pie.htc檔案不怎麼方面。如果絕對路徑於根目錄，則CSS檔案不方便移動；如果相對路徑與HTML文件，則pie.htc檔案在不同HTML頁面見的重用性大大降低。

3. 縮寫的問題
使用PIE實現IE下的CSS3渲染（其他方法也是一樣），只能使用縮寫的形式，例如圓角效果，我們可以設定border-top-left-radius表示左上圓角，但是PIE確實不支援這種寫法的，只能是老老實實的縮寫。

4. 提供正確的Content-Type
要想讓IE瀏覽器支援htc檔案，需要一個有著”text/x-component” 字樣的content-type 頭部，否則，會忽視behavior。絕大數web伺服器提供了正確的content-type，但是還有一部分則有問題。如果您發現在您的機子上PIE方法無效，也就是htc檔案這裡指pie.htc檔案無效，檢查您的伺服器配置，可能其需要更新到最新的content-type。例如對於Apache，您可以在.htaccess檔案中左如下處理：

AddType text/x-component .htc

附帶一個IE7,IE8瀏覽器純CSS實現正圓角效果

CSS程式碼：

.box {

    width: 150px; height: 150px;

    line-height: 150px;

    position: relative;

    overflow: hidden;

}

.radius {

    position: absolute;

    width: 100%; height: 100%;

    border-radius: 50%;

    border: 149px dotted;

    /* IE7,IE8圓尺寸要小1畫素同時有1畫素偏移 */

    margin: 0 0 1px 1px;

    border-width: 0vw;

    margin: 0vw;

    color: #cd0000;

    background-color: currentColor;

}

.text {

    position: relative;

    color: #fff;

    text-align: center;

    font-size: 24px;

}

HTML程式碼：

<div class="box">

    <i class="radius"></i>

    <p class="text">美女</p>

</div>

總結

css3圓角的使用讓web頁面效果更加酷炫，但是各類讓低版本瀏覽器支援部分css3效果的程式碼都很複雜，一般人不精通js和vml繪製是修改解決不了的，普遍問題就是在特殊情況下會出現一些怪毛病很難解決。要保證效果就老老實實做圖片圓角css2拼背景 ；要不就降級體驗，讓低版本瀏覽器直接顯示直角，高版本瀏覽器顯示圓角。

主要參考資料：

https://msdn.microsoft.com/en-us/magazine/gg508841.aspx

http://www.zhangxinxu.com/wordpress/2010/07/pie%E4%BD%BFie%E6%94%AF%E6%8C%81css3%E5%9C%86%E8%A7%92%E7%9B%92%E9%98%B4%E5%BD%B1%E4%B8%8E%E6%B8%90%E5%8F%98%E6%B8%B2%E6%9F%93/

個人網站：

http://www.88856777.com

http://www.xmqisheng.com

http://www.erfeirizhi.com

相關推薦

徹底搞明白：CSS3圓角使用

引言 web開發中使用css對頁面進行排版佈局，CSS3是層疊樣式表（Cascading StyleSheet）語言的最新版本，它的一大優點就是支援圓角。本文根據實際專案開發經驗，對border-radius進行詳細講解。 CSS3 border-radius

CSS3：CSS3 圓角

w3cschool png oat -s 代碼 返回頂部 瀏覽器支持 safari right ylbtech-CSS3：CSS3 圓角 1.返回頂部 1、 CSS3 圓角 CSS3 圓角 使用 CSS3 border-radius 屬性

徹底搞明白find命令的-mtime引數的含義

以前一直沒有弄明白find的 -mtime引數的真正含義 剛好今天跟一個同學聊起這個事 我在寫shell指令碼的時候，定時刪除一些檔案的時候，也經常用得到-mtime這個引數，所以打算好好看看，把它弄明白一下 man find裡的解釋： -mtime n File’s data was last m

java資料結構初學（記錄）單鏈表交換兩節點（3）可與之前寫的進行對比（程式碼優化）——如果後續徹底搞明白後將精煉此部分內容，刪除部分內容

public void swap(String number1, String number2){                  // 定義節點         StudentNode t1,t2,t3,t4;         /**          *        

徹底搞明白win32程式設計 .h標頭檔案和.cpp原始檔關係

一.想把專案的全域性引數都放在一個檔案裡，好方便對初始值修改。 步驟： 1.新建一個.h標頭檔案，只宣告引數為全域性變數（注意是宣告！！！）。 2.一定要extern，這才是宣告全域性變數 而且 一定不能賦初值 extern int a;

徹底搞明白ES6的Promise用法

去年6月份， ES2015正式釋出（也就是ES6，ES6是它的乳名），其中Promise被列為正式規範。作為ES6中最重要的特性之一，我們有必要掌握並理解透徹。本文將由淺到深，講解Promise的基本概念與使用方法。 ES6 Promise 先拉出來遛遛 複雜的概念先

【python測試開發棧】帶你徹底搞明白python3編碼原理

在之前的文章中，我們介紹過編碼格式的發展史：[文章傳送門-todo]。今天我們通過幾個例子，來徹底搞清楚python3中的編碼格式原理，這樣你之後寫python指令碼時碰到編碼問題，才能有章可循。 我們先搞清楚幾個概念： 系統預設編碼：指python直譯器預設的編碼格式，在python檔案頭部沒有宣告其他編

填坑：Windows下使用OpenSSL生成自簽證書（很簡單，一個晚上搞明白的，讓後來者少走彎路）

vat 都是 環境 csr 過程 環境變量 crypt 報錯 out 最近在學習中發現openssl 中有個坑，所有的教程都是openssl genrsa -des3 -out private.key 1024，但是產生的證書，npm start 之後就報錯如下： erro

習慣8：1天徹底搞定1個發音

你知道嗎？英語只有44個發音。就是聲音。如果你每天把一個聲音搞定了。在一個半月之內，你的英語發音已經很好。那怎麼做？其實很簡單。你要隨時隨地找機會練練你的發音。比如你剛剛下班要回家的時候你等電梯，你可能要等一兩分鐘就把你的發音素材拿出來念。你練完了，可能 只有30分鐘，如果電梯還沒來，那就再練一

Websocket：看完讓你徹底搞懂Websocket原理 即時訊息通訊

http://goeasy.io/cn/pricing 封裝好的socket Web訊息推送系統，便捷實現web端訊息推送， 原生的封裝參考：https://blog.csdn.net/young_phper/article/details/52441143 分割線--

轉：徹底搞清楚javascript中的require、import和export

開發 括號 async tel accept bound tab and 自然 為什麽有模塊概念 理想情況下，開發者只需要實現核心的業務邏輯，其他都可以加載別人已經寫好的模塊。 但是，Javascript不是一種模塊化編程語言，在es6以前，它是不支持”類&

五分鐘徹底搞懂你一直沒明白的Linux記憶體管理

現在的伺服器大部分都是執行在Linux上面的，所以，作為一個程式設計師有必要簡單地瞭解一下系統是如何執行的。對於記憶體部分需要知道：   地址對映 記憶體管理的方式 缺頁異常   先來看一些基本的知識，在程序看來，記憶體分為核心態和使用者態兩部分，經典比例如下： &n

徹底搞懂CSS偽類選擇器：is、not

本文介紹一下Css偽類:is和:not，並解釋一下is、not、matches、any之前的關係 :not The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prev

關於ie兼容css3圓角與陰影與漸變的渲染

pan 文件 背景 調用 class wid 多圖片 圖片 屬性 我們都知道，ie不兼容一些css3新屬性，這就導致有些瀏覽效果不太好，關於ie的兼容有很多前輩給出了解決方案。這裏我主要講我用到的一個比較好用的方案，即PIE。這裏的PIE實際上指的是一個名為pie.htc的

CSS3圓角邊框

方向 ora 圓角邊框 cnblogs otto borde 瀏覽器 hal log border-radius屬性的使用方法： 1.水平和垂直半徑一樣： border-radius只設置一個值：四個圓角相同 border-radius設置兩個值：斜對角相同 border

徹底搞懂oracle的標量子查詢

article pop acc 問題 content 狀態 cat tracking varchar2 oracle標量子查詢和自己定義函數有時用起來比較方便，並且開發者也常常使用。數據量小還無所謂。數據量大，往往存在性能問題。 下面測試幫助大家徹底搞懂標量子查

CSS3總結學習（一）：CSS3用戶界面

interface 繪制 如果 位置 nbsp 瀏覽器 none ble adding 在CSS3中，新的用戶界面屬性有很多，本文重點介紹resize,box-sizing,offset。 瀏覽器支持，如下圖，圖片源於W3school 1.CSS Resizing 在cs

看完讓你徹底搞懂Websocket原理

找到 說了 成了 原理 兩層 cep 告訴 edi 純粹 偶然在知乎上看到一篇回帖，瞬間覺得之前看的那麽多資料都不及這一篇回帖讓我對 websocket 的認識深刻有木有。所以轉到我博客裏，分享一下。比較喜歡看這種博客，讀起來很輕松，不枯燥，沒有布道師的陣仗，純粹為分享。廢

第95天：CSS3 邊框、背景和文字效果

決定 shadow css3多列 應該 bre column set 動畫 css3 　　1、CSS3邊框： border-radius：CSS3圓角邊框。在 CSS2 中添加圓角矩形需要技巧，我們必須為每個圓角使用不同的圖片，在 CSS3 中，創建圓角是非常容易的，在

第99天：CSS3中透視perspective

其中 圖像 .org mic 瀏覽器 需要 圖片 大小 表示 CSS3中透視perspective 透視原理： 近大遠小 。 瀏覽器透視：把近大遠小的所有圖像，透視在屏幕上。 理解瀏覽器的坐標系：瀏覽器平面為 Z=0的平面，坐標原點默認為圖片的中心，可以通過更改透視原點