3 個答案:

答案 0 :(得分：2)

邊框圖像覆蓋在元素的頂部，因此即使邊框圖像是透明的，它仍然會顯示其背后元素的顏色。

純CSS解決方案是使用偽元素。

首先將div的位置設置為非靜態(相對，絕對或固定將起作用)。

然后使你的元素絕對并跨越div的寬度：

div:before {

content: "";

position: absolute;

left: 0;

width: 100%;

bottom: 100%;

height: 10px;

background: url(http://i.imgur.com/PEY43VD.png);

}

這將考慮你的div的寬度/填充。

答案 1 :(得分：0)

您可以使用具有透明背景的png圖像中的border-image而不是漸變。

http://codepen.io/anon/pen/iFJpH

html {background:lightgray;}

div {margin:5em;min-height:5em;background:white;border-style: solid;

border-width: 40px 10px 0px;

-moz-border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;

-webkit-border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;

-o-border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;

border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;

響應？

要調整它的最后一件事，

它是通過mediaqueries設置不同的最大寬度

因此，當窗口減小寬度時，三角形不會被切片。

您也可以設置border-size來增大或減少三角形。他們會拉伸

答案 2 :(得分：0)

我認為，(我有)兩種解決方案適合你。

1.在這種情況下，沒有任何東西讓你的邊界div與你的頁面顏色相同，你可以讓它透明。

2.如果第一種解決方案對您不方便，請嘗試：

For the css:

div

{

border:15px solid transparent;

width:500px; //As you want

background-color: rgba(255,255,255,0); //No padding here ;)

}

#NiceBorder

{

-webkit-border-image: url(border.png) 30 30 round;

-o-border-image: url(border.png) 30 30 round;

border-image: url(border.png) 30 30 round;

}

For the html:

Here, you can put some background-color as you want and that's it.

I hope I've helped you.

Lionnel。

總結

以上是生活随笔為你收集整理的php div边框,CSS自定义边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。