- ベストアンサー
CSS3で角丸の上部分を違う色にしたい
CSS3で角丸の上部分を違う色にしたいのですが、 どうすればいいでしょうか？ 角丸でくくって、 色を変えた角丸の上部分に、タイトルとか入れたい、です
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
角丸であろうとなかろうと・・・ CSS2の border-top-color: border-left-color: border-right-color: border-bottom-color: の各プロパティで指定します。 ★8.5 ボーダーのプロパティ（Border properties） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#border-properties ) いろは途中で変化します。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) ※オプションでCSS3を選択 でチェック済み ★タブは＿に置換してある。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.section{ ＿border:solid 10px blue; ＿border-top-color:red; ＿border-radius: 1em; ＿position:relative; ＿margin-top:65px; } div.section>h2{ ＿position:absolute; ＿top:-65px; ＿width:22em; ＿left: 5em;; ＿line-height:40px; ＿background-color:red; ＿border-radius: 1em 1em 0 0; ＿text-align:center; } --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="section"> ＿＿<h2>CSS3で角丸の上部分を違う色にしたい</h2> ＿＿<p>CSS3で角丸の上部分を違う色にしたいのですが、どうすればいいでしょうか？</p> ＿＿<p>角丸でくくって、色を変えた角丸の上部分に、タイトルとか入れたい、です</p> ＿</div> </body> </html>
お礼
回答ありがとうございましたー