Q&A
初めましてWEBデザインを学んでいるものです。
css border-radiusに関して疑問があり質問しました。
入力フォームを角丸にしようと下記のcssコード内、.ulに
border-radiusを打ったのですが
反映されません。
これは指定方法が間違っているのでしょうか。
お手数ですがお時間ある方、解決方法等の回答をお願い致します。
・htmlコード
<!DOCTYPE html> <html lang="ja" id="facebook" class="screen"> <head> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8"> <link rel="icon" type="image/png" href="icon.png"> <title id="pagetitle">Facebook ログインまたは登録</title> </head> <body> <div class="icon"> <div class="description"> <img class="facebook" src="img/facebook.svg" width="300" height="150" alt="facebook"> <h1 class="detail" height="300"> 友達や同級生、仲間、同僚たちと<br>繋がりを深めることができます。<br> ケータイからでもアクセス可能です。 </h1> </div> <div class="form"> <form action="" method="POST"> <ul> <li> <div class="input_mail"> <input type="text" name="mail_phone" placeholder="メールアドレまたは電話番号" style="width:330px; height:35px;" autofocus> </div> </li> <li> <div class="input_pass"> <input type="text" name="pass" placeholder="パスワード" style="width:330px; height:35px;" autofocus> </div> </li> </ul> </form> </div> </div> </body> </html>コード
cssコード
.icon { display: flex; justify-content: center; width: 100%; height: 876px; background-color: gainsboro; } .description > .facebook { margin-top: 140px; position: relative; right: 60px; } .description > h1 { margin-top: 0%; margin-left: 30px; margin-bottom: 0%; position: relative; bottom: 30px; right: 60px; font-weight: normal; font-size: 28px; } ul { list-style: none; border-radius: 6px; } コード
回答2件
0
ulのスタイルにbackground-colorを指定するとわかりやすいのですが、border-radius自体はちゃんと適用されています。
フォーム自体を角丸にしたい場合はinputに指定しましょう。
css
1input { 2 list-style: none; 3 border-radius: 6px; 4}
投稿2020/09/02 00:13
総合スコア2411
0
ボーダー表示には「サイズ」「線のスタイル」「線の色」が必要です。
例：
CSS
1ul { 2 list-style: none; 3 border-radius: 6px; 4 border:1px solid #000; 5}
投稿2020/09/02 00:15
総合スコア80861
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。