内部边界每个不同的价值观

时间:2014-05-18 15:31:01

标签: css

如何使用不同的值制作内边框?例如:

上:20px
右:80px
下图:40px
左:10px

我想要的例子......

谢谢。 :)

3 个答案:

答案 0 :(得分:1)

您可以使用box-shadow

来完成此操作

Here is an example how i've used it

答案 1 :(得分:1)

要使其成为内边框,请在元素上使用两个框阴影,用逗号分隔,并在第二个集上使用负值。 像这样:

box-shadow: inset 10px 20px 0px #000, inset -80px -40px 0px #000;

这是一个jsfiddle演示:http://jsfiddle.net/dr_lucas/23Egu/326/

这是跨浏览器兼容的CSS:

-webkit-box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
-moz-box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;

请注意,如果您需要它与不支持box-shadow的旧IE版本兼容,您可以使用CSS3pie: http://css3pie.com/

希望这有帮助。

答案 2 :(得分:0)

内部边界:你的意思是填充吗?

如果是这样的话:

padding: 20px 80px 40px 10px; //左上角右下方

否则,如果你真的意味着边界:

border-top: 20px solid #color;
border-right: 80px solid #color;
border-left: 10px solid #color;
border-bottom: 40px solid #color;

也可以通过CSS3 box-shadow来实现