3

斜めの境界線の問題を取り除こうとしています。写真に表示するのが最善です:

div に適用される CSS は次のとおりです。

.blog_post {background: #fff}

.blog_post .post {
    border-right-color: #F1F1F1;
    border-top-color: #FF0000;
}
.blog_post .post, .blog_post .sidebar {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #FFFFFF;
    border-width: 10px;
}
.blog_post .post {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #9A9570;
    border-color: #8F8960 #8F8960 -moz-use-text-color;
    border-image: none;
    border-style: solid;
    border-width: 10px;
    float: left;
    margin: -560px 0 0 -12px;
    padding: 28px 30px;
    position: relative;
    width: 528px;
    z-index: 9;
}

どんな助けでも大歓迎です。

4

3 に答える 3

1

いつでもご利用いただけますinset box shadows。非常に使いやすく、多くの CSS を必要とせず、HTML を変更する必要もありません。

見てみな。ここでjsFiddle

div {
    box-shadow: inset 0px 10px 0px red;
    border: 10px solid blue;
    border-top: 0px;
}
于 2013-10-11T18:16:25.257 に答える
0

疑似クラスの使用:beforeと:after

.border-fixed {
  width: 300px;
  height: 300px;
  background: #EEE;
  margin: 60px auto 0;
  border: solid 10px #DDD;
  border-top-color: #BBB;
  position: relative;
}

.border-fixed:before,
.border-fixed:after {
  content: "";
  top: -10px;
  left: -10px;
  position: absolute;
  width: 10px;
  height: 10px;
  background: #BBB;
}

.border-fixed:before {
  right: -10px;
  left: auto;
}
于 2013-10-11T18:17:41.613 に答える