2014-03-26 37 views
-1

我使用border-image標記在css中創建自定義邊框。 我使用的背景顏色與邊框顏色相同。但它不能填滿整個身高。自定義邊框css和背景圖像

<!DOCTYPE html> 
<html> 
<head> 
<style> 

div{ 
border:15px solid transparent; 
width:250px; 
} 

div p { 
background-color: #74c7a9; 
padding-right: 20px; 
padding-bottom: 20px; 
} 


#round { 
-webkit-border-image:url(border2.png) 30 30 round; /* Safari 5 */ 
-o-border-image:url(border2.png) 30 30 round; /* Opera */ 
border-image:url(border2.png) 30 30 round; 
} 

</style> 
</head> 
<body> 


<div id="round"> 
    <p>Here, the image is tiled (repeated) to fill the area. 
    </p> 
</div> 

</body> 
</html> 

回答

0

你在p背景和DIV邊界之間看到的空間是p的保證金(頂部和底部)。

您可以

p { 
    margin: 0px; 
} 

將其關閉,如果你覺得這種方式它變得太小,加

p { 
    padding-top: 20px; 
} 

,或者以其他方式(可能更容易)設置背景在div而不是在p