css-float - 图像的 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;
}

你看到左上角和右上角了吗？为什么会这样？我该如何解决？我说的是顶部边框在 Angular 落里被“切割”了......谢谢!!

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;
}