border屬性：
border-width、border-style、border-color 其中border-style可以為none或hidden
outline（輪廓）
在元素邊框邊緣的外圍繪製一條包圍元素的線，包括outline-color、outline-style、outline-width三個子屬性的設定，可預設，無固定順序。輪廓不佔據頁面空間，也不一定是矩形。
除了IE以外的瀏覽器都直接支援outline。只有規定了!DOCUMENT之後的IE8以上版本的瀏覽器才支援outline。
outline-style可為none（不含有hidden屬性）
總結：這兩者的區別有:
1.outline是不佔空間的，既不會增加額外的width或者height（這樣不會導致瀏覽器渲染時出現reflow或是repaint）
2.outline有可能是非矩形的（Firefox瀏覽器下）
在FireFox瀏覽器中，就有和outline匹對的圓角夫妻outline-radius
樣本：
使用outline實現效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>直角三角形（右下角）</title> <style type="text/css"> .use-outline-offset{ margin-left: auto; margin-right: auto; width: 200px; height: 200px; border:40px solid #000000; background-color:#cccccc; outline-width:40px; outline-style:dotted; outline-offset:-80px; box-sizing: border-box; } </style></head><body><p class="use-outline-offset"></p></body></html>
outline-radius雖然沒戲了，但是，我們可以使用其他屬性，可以實作類別似的效果，比方說，圖形構建大神之一的box-shadow.
我們平時使用box-shadow最多的是前面3個參數，水平/垂直位移以及模糊大小，可能有一些小夥伴並不清楚其第4個選擇性參數值究竟有何用？box-shadow第4個參數值，名外擴充，可以把投影範圍擴大，當然，擴大的地區是實色地區。我們就可以利用這一特性，類比實現不影響元素佔據尺寸的outline實色邊框效果啦！
執行個體先行，代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圓角</title> <style type="text/css"> .outline-radius { margin: 200px auto; width: 400px; height: 300px; border-radius: 1px; box-shadow: 0 0 0 30px #cd0000; } .outline-radius>img{ width: 100%; height: 100%; } </style></head><body><p class="outline-radius"> <img src="img/mm1.jpg"></p></body></html>
下面簡單解釋下兩行CSS代碼的含義：
border-radius: 1px表示圓角大小1像素。有同學可能奇怪了，怎麼是1像素啊，圓角明明好幾十像素，下面正好就解釋了；
box-shadow: 0 0 0 30px #cd0000出現了4個數值，分別是水平位移0, 垂直位移0，模糊0(純色), 擴充大小30像素。我們可以想象成，光線直接從盒子的正上方照下來，因為沒有位移沒有模糊，我們看不到任何陰影。實際上，盒子的陰影正好就是盒子的大小（外帶1像素圓角），此時，擴充30像素，我們可以腦補一下，1像素圓角的陰影再擴充30像素。喲，不就是我們需要的效果嘛，不就是展示的效果嘛！
知道border-radius 1像素的左右了吧，擴充30像素後，圓角就是30像素大小了。
然而，雖然肉眼看不出來，上面的方法實際有瑕疵，因為圖片不是純正的直角，有1像素的圓角。如果你想實現完美的內方外圓的效果，可以套一層標籤，外面的標籤使用border-radius和box-shadow就可以了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
