php div边框,CSS自定义边框

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。