css左右边框的图像越过顶部边框

Question

检查一下 http://codepen.io/anon/pen/jfIil/

css代码

.xyz {
    margin: 50px;
    width: 300px;
    height: 300px;
    background-color: #fff;
    border-right: 1px solid #DEDEE0;
    border-bottom: 1px solid #DEDEE0;
    border-left: 1px solid #DEDEE0;
    border-top: 3px solid #73A784;
}

你看到左上角和右上角了吗？为什么会这样？我该如何解决？ 我正在谈论最高边界获得＆＃34; cutted＆＃34;在角落...... 谢谢！

Answer 1

.box {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-color: red blue green yellow;
  border-style: solid dashed dotted double;
  border-width: 20px 10px 5px 15px;
}

这将为四个边框中的每一个设置不同的宽度，边框颜色和边框样式。

此外，每个属性都可以进一步细分为border-left-style，border-top-width，border-bottom-color等。

Checkout the fiddle here to understand better

.box {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-color: red blue green yellow;
  border-style: solid dashed dotted double;
  border-width: 20px 10px 5px 15px;
}

Solution here

CSS

.xyz {
    margin: 50px;
    width: 300px;
    height: 300px;
    background-color: #fff;
    border-left: 20px solid black;
    border-right: 20px solid black;
    box-shadow: 0px -20px 0 0 red;
    height: 150px;
    width: 150px;
}