下記の画像のようにテキストの下に、丸い点線をつけたいです。
http://itpro.nikkeibp.co.jp/article/Reference/20091124/340933/border-hr_02.jpg
テキストの色と点線の色は変えたいです。
色々試したのですが、
点線が丸くならず、色を別にすることもできませんでした。
現在のコードは下記です。
ご教示のほど宜しくお願い致します。
html
1<span id="nya">にゃー</span> 2 3<span id="underline">点線を丸くしたい</span> 4 5<h1>枠線の種類を指定する<br>「border-style」</h1> 6 7<div> 8 <hr> 9 <table> 10 <tbody> 11 <tr> 12 <td>実線</td> 13 <td>solid</td> 14 </tr> 15 <tr> 16 <td>点線</td> 17 <td>dotted</td> 18 </tr> 19 <tr> 20 <td>破線</td> 21 <td>dashed</td> 22 </tr> 23 </tbody> 24 </table> 25</div>
css
1#underline{ 2 font-weight: bold; 3 font-size: 15px; 4 border-bottom:5px dotted; 5 text-align: left; 6} 7 8 9#nya{ 10 /* Old Browsers */ 11 background: #000; 12 13 /* IE9, Firefox 1.5-3.5, Safari 3.1-3.2, Opera 8.0-11.0, iOS Safari 3.2-4.0.3 */ 14 background: url(data:image/svg+xml;base64,...); 15 16 /* Safari 4.0-5.0, Chrome 3-9, iOS Safari 4.0.4-5.0, Android 2.1-3.0 */ 17 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #fff)); 18 19 background: -webkit-linear-gradient(top, #000, #fff); /* Safari 5.1+, Chrome 10+, iOS Safari 5.1+, Android 4.0+ */ 20 background: -moz-linear-gradient(top, #000, #fff); /* Firefox 3.6-15.0 */ 21 background: -o-linear-gradient(top, #000, #fff); /* Opera 11.10-12.10 */ 22 background: linear-gradient(to bottom, #000, #fff); /* IE10, Firefox 16.0+, Opera 12.50+ */ 23 24 /* IE 8+ */ 25 /* "-ms-filter" should be included first before "filter" in order for the filter to work properly in Compatibility View */ 26 /* http://msdn.microsoft.com/en-us/library/ms530752%28v=vs.85%29.aspx */ 27 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=0)"; 28 29 /* IE 5.5-7 */ 30 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=0); 31} 32 33/* Set filter: none; for IE 9+ */ 34/* Browsers which support both Media Queries and -ms-filter are only IE 9+ */ 35@media screen and (min-width:0) { 36 .gradient { 37 -ms-filter: ""; 38 } 39} 40 } 41 42 43 44 45 div { border-style : solid; 46 border-width : 5px; 47 padding : 5px; 48} 49 50h1 { border-top-style : dashed; 51 border-bottom-style : dotted ; 52 border-left-style : groove; 53 border-right-style : double; 54 border-width : 5px 15px; 55 border-color : #ff0000; 56} 57 58hr { border-style : ridge none none none; 59 border-width : 5px; 60 border-color : #0000ff; 61} 62 63table { border-collapse: collapse; } 64 65td { border-style : solid; 66 border-width : 1px; 67 border-color : #000000; 68 padding : 2px; 69}
回答5件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/12 02:07