1つのdivに異なる罫線があります

Question

divで罫線を変えるときにCSSを使用する際に問題があります。 divの左上、右上、右端に「通常の」実線の枠を持つカード（div）が必要です。しかし、下には、特定の境界線画像が必要です。

私は下側の境界に画像を持つことができますか、3面には "通常の"境界を持つことができますが、両者を同時に持つ方法はわかりません。

画像を置くと、すべての罫線に移動します。

私は下の画像境界に次のコードを使用しています：

border-width: 0px 0px 32px 0px; 
-moz-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
-webkit-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
-o-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
border-image: url(../images/bordas/Recorte.png) 31 25 33 26 fill repeat; 

は、次の3つの側面の通常の固体境界と下境界線でイメージを持っている任意の方法を知っていますか？

border-widthを0以上に変更すると、通常の実線の境界線ではなく、イメージが表示されます。

ありがとうございます！

Answer 1

ボトムイメージの境界線を最初に設定し、次に他の側に設定することができます。

border-image:url("http://example.com/image1.png"); 

/* setting borders for other sides */ 
border-top:1px solid #000; 
border-left:1px solid #000; 
border-right:1px solid #000; 

以下、他の側の上下左右に設定します。

Answer 2

:afterを使用して、その効果をシミュレートすることができます。

div { 
 
    border: 1px solid black; 
 
    border-bottom: 0px; 
 
} 
 
div:after { 
 
    content: ''; 
 
    width: calc(100% + 2px); 
 
    margin-left: -1px; 
 
    background: white; 
 
    display:block; 
 
    background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66); 
 
    background-repeat: repeat; 
 
    height: 10px; 
 
}

<div>test</div>

Answer 3

私は実際には別のdivの内側のdivを追加することによって、これを行うことができました。

.div-outside-class { 
border-width: 1px 1px 0px 1px; 
border-style: solid; 
border-color: #e6e9ee; 
border-radius: 10px; 
} 

.div-inside-class { 
border-style: solid; 
border-width: 0px 0px 32px 0px; 
-moz-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
-webkit-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
-o-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat; 
border-image: url(../images/bordas/Recorte.png) 31 25 33 26 fill repeat; 
margin-bottom: -16px; 
} 

HTMLコードは、そのようなものです：

<div class="div-outside-class"> 
    <div class="div-inside-class> 
    </div> 
</div>