#<解決したいこと>
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}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/19 01:40