画像の縁を飾るborder-imageを勉強中ですが、表示が表示されているところと、されないところがあります。
これはネットにでているものです。
URL https://weblan3.com/css/border-image です。
border_A1,border_B1,border_C1が表示されません。
border_A2,border_B2,border_C2は表示されています。
原因は同じところだと思い。border_A2 を見ながらborder_A1をいじってみたのですが、
うまくいきません。
sample.htmlとimagesフォルダ、cssフォルダは同じフォルダにあります。
よろしくお願いいたします。
//sample.html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ボーダーに画像を使う</title> <link href="css/border-image-3.css" rel="stylesheet"> </head> <body> パターンA <div class="box_sample border_A1"> border-style: solid; border-width: 30px; border-image: url(../images/border_image2.png) 30 repeat; border-image-width: 30px; </div> <div class="box_sample border_A2"> border-style: solid; border-width: 30px; border-image-source: url(../images/border_image2.png); border-image-slice: 30; border-image-width: 30px; border-image-repeat: repeat; </div> パターンB <div class="box_sample border_B1"> border-style: solid; border-width: 10px 20px; border-image: url(../images/border_image2.png) 30 15 round; border-image-width: 9px 15px; </div> <div class="box_sample border_B2"> border-style: solid; border-width: 10px 20px; border-image-source: url(../images/border_image2.png); border-image-slice: 30 15; border-image-width: 9px 15px; border-image-repeat: round; </div> パターンC <div class="box_sample border_C1"> border-style: solid; border-width: 15px 30px; border-image: url(../images/border_image2.png) 30 stretch; border-image-width: 15px 30px; </div> <div class="box_sample border_C2"> border-style: solid; border-width: 15px 30px; border-image-source: url(../images/border_image2.png); border-image-slice: 30; border-image-width: 15px 30px; border-image-repeat: stretch; </div> </body> </html> //sample.css @charset "utf-8"; .box_sample { padding: 5px; margin: 0 0 10px 0; } // パターンA .border_A1 { border-style: solid; border-width: 30px; border-image-source: url(../images/border_image2.png) 30 repeat; border-image-width: 30px; } .border_A2 { border-style: solid; border-width: 30px; border-image-source: url(../images/border_image2.png); border-image-slice: 30; border-image-width: 30px; border-image-repeat: repeat; } // パターンB .border_B1 { border-style: solid; border-width: 10px 20px; border-image-source: url(..images/border_image2.png) 30 15 round; border-image-width: 9px 15px; } .border_B2 { border-style: solid; border-width: 10px 20px; border-image-source: url(../images/border_image2.png); border-image-slice: 30 15; border-image-width: 9px 15px; border-image-repeat: round; } // パターンC .border_C1 { border-style: solid; border-width: 15px 30px; border-image: url(../images/border_image2.png) 30 stretch; border-image-width: 15px 30px; } .border_C2 { border-style: solid; border-width: 15px 30px; border-image-source: url(../images/border_image2.png); border-image-slice: 30; border-image-width: 15px 30px; border-image-repeat: stretch; }
スーパーリロード( http://uzurea.net/cacheclear-and-superreload-2018/ )を行ってもその問題は改善されませんか?
むつかしくておしゃることが理解できないです。すみません。
いろいろ、行ったり来たり1日苦戦しています。
スーパーリロードとは何か、などはこちら( https://wa3.i-3-i.info/word13838.html )がわかりやすいと思いますが、このサイトを読んだ上でも理解ができませんか?
要はキャッシュを削除しろってことです。
パターンA,パターンB,パターンCもA2,B2,C2は表示されます。A1,B1,C1は表示されません。表示されないコードを表示されるコードのコードにしたりしましたが、変化がありませんでした。ちなみにborder_A1のborder-imageをborder-image-sourceにしてみたりしました。
スーパーリロードの結果はどうでしたか?
その結果が上だと言うことでしょうか?
そうです。もう少し頑張ってみます。ありがとうございます。
回答1件
あなたの回答
tips
プレビュー