css之outline實現圓角效果

本文轉載自查看原文 2017-09-27 14:33 4960 css

對，你沒有看錯，outline也可以實現圓角，不過請先讀完自然會知道結果；

==========================================================================================================================================================================

都知道border屬性和outline屬性，都是邊框的意思，

其次，支持的屬性值幾乎都是一樣的，例如，outline-style和border-style值dotted, dashed, solid, ...之類的，一些語法也幾乎一樣。

對瀏覽器的支持

outline嚴格來講屬於CSS3屬性，但是IE8+瀏覽器就支持了。外掛一句，IE9+瀏覽器的outline還支持invert，專門針對outline-color. 所以，如果你的項目不用管IE6/IE7瀏覽器，可以把outline掛在心中，有時候說不定會幫忙的支持

三是否占據空間

這點我們都知道 border 屬性是占據位置的，假設元素100*100像素，我們給元素設置border:10px solid，則實際該元素占據的尺寸至少就是120*120像素；但是outline就不一樣了，他根本不占位置

看代碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
     *{
     	margin: 0 auto;
     	

     }
     #aa{
     	 width: 500px;
     	  height: 500px;
     	   background: red;
     	    outline: 10px yellow solid;
     }

	</style>
</head>
<body>
	<div id="aa">
		



	</div>
</body>
</html>

三、outline的圓角效果

border有圓角效果那么outline有沒有圓角效果呢

我們來試試

用代碼說話

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin:0 auto;
    }
    img {
    outline: 30px solid #cd0000;    
    -moz-outline-radius: 30px;
}
    </style>
</head>
<body>
<div style="width:100px;height:800px;margin-top:50px">
    <img src="f1.png" alt="">    
</div>


</body>
</html>