質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

1回答

2894閲覧

css3 border-image / border-color 反映がうまくいかない

kotori_00

総合スコア46

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

1クリップ

投稿2017/02/16 10:01

編集2017/02/16 11:18

#<解決したいこと>
border-imageでli要素の左右に画像を表示させ、同じli要素(ページと閲覧のみ)の下はborder-colorで色を透明の表示にしたいのですが、うまくいきません。
ノート、編集、履歴表示のみborder-bottom-colorを入れたいです。

####サンプルキャプチャ こんな風にしたいです
イメージ説明

html

1<div id="page-main-menu"> 2 <form name="" id="search"> 3 <input type="text" placeholder="Wikipedia内を検索" id="search-text"><input type="image" src="search.svg" id="search-img"> 4 </form> 5 <ul class="page-contents-left"> 6 <li>ページ 7 <li><a href="#">ノート</a> 8 </ul> 9 <ul class="page-menu-right"> 10 <li>閲覧 11 <li><a href="#">編集</a> 12 <li><a href="#">履歴表示</a> 13 </ul> 14</div><!--/#page-main-menu-->

css

1#page-main-menu{ 2 overflow: auto; 3 padding-bottom: 11px; 4 margin-bottom: -1px; /*borderを重ねる*/ 5 height: 25px; 6} 7 8#page-main-menu ul { 9 background-image: linear-gradient(#fff 20%, #eaf3f8 100%); 10} 11 12#page-main-menu li:first-child { 13 background-color: #fff; 14 /*ノートと閲覧のborder-bottomのみ透明にしたい。*/ 15 border-bottom-color: transparent; 16} 17 18#page-main-menu li:last-child { 19 /*li要素の右側のみにborder-imageを入れたい*/ 20 border-image: url("border-blue.png") 1; 21 border-style: solid; 22 border-image-width: 0 1px 0 0; 23} 24 25 26#page-main-menu li { 27 /*li要素の左のみborder-imageを入れる*/ 28 border-image: url("border-blue.png") 1; 29 border-image-width: 0 0 0 1px; 30 border-style: solid; 31 /*ノート、編集、履歴表示の下のみborder-colorを入れたい*/ 32 border-bottom: 1px solid red; 33 34 line-height: 25px; 35 font-size: 14px; 36 padding: 5px; 37 margin: 0; 38 display: inline-block; 39} 40 41.page-contents-left{ 42 float: left; 43} 44 45 46.page-menu-right{ 47 float: right; 48}

#キャプチャ 現在の状態
イメージ説明

#試したこと

ベンダープレフィックスを試してみてもうまく反映されません。
border-widthをborder-image-widthや
border-imageをborder-image-sourceに
書き換えてみてもうまく表示されませんでした。

css

1#page-main-menu li:last-child { 2 /*li要素の右側のみにborder-imageを入れたい*/ 3 border-image-source: url("border-blue.png"); 4 border-style: solid; 5 border-width: 0 1px 0 0; 6 -webkit-border-image: url("border-blue.png") 1 round; 7 -webkit-border-style: solid; 8 -webkit-border-width: 0 1px 0 0; 9} 10 11 12#page-main-menu li { 13 /*li要素の左のみborder-imageを入れる*/ 14 border-image-source: url("border-blue.png"); 15 border-width: 0 0 0 1px; 16 border-style: solid; 17 -webkit-border-image-source: url("border-blue.png"); 18 -webkit-border-width: 0 0 0 1px; 19 -webkit-border-style: solid; 20 /*ノート、編集、履歴表示の下のみborder-colorを入れたい*/ 21 border-bottom: 1px solid red; 22}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

border-image ではなく background-image で実装するようにすれば良いような気がします。

【CSSで背景画像を複数設定する | cly7796.net】
http://cly7796.net/wp/css/sets-a-plurality-of-background-image-in-css/

投稿2017/02/18 16:57

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kotori_00

2017/02/19 01:40

回答ありがとうございます。 以下記述で解決することができました!!*・゜゚・*:.。..。.:*・'(*゚▽゚*)'・*:.。. .。.:*・゜゚・* #page-main-menu li:last-child { background-image: url("border-blue.png"), url("border-blue.png"); background-position: left, right; background-repeat: no-repeat, no-repeat; } #page-main-menu li { background-image: url("border-blue.png"); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #a7d7f9; line-height: 25px; font-size: 14px; padding: 5px; margin: 0; display: inline-block; }
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問