HTML_CSS
LINEでログイン
Googleでログイン
Twitterでログイン
問題4：マルチボーダーを作成しよう
マルチボーダーを作成してみましょう。
色合いを完璧に見本に合わせなくても大丈夫です。
マルチボーダーのロジックだけ理解できてればOKです。
見本を参考に作成してください。
色合いを完璧に見本に合わせなくても大丈夫です。
マルチボーダーのロジックだけ理解できてればOKです。
見本を参考に作成してください。
期待する画面
解答ソースコード
<div class="background-border"></div>
¥HTML¥
.background-border {
width: 500px;
height: 500px;
background-color: #0e6edf;
background-image: linear-gradient(90deg, rgba(180, 180, 180) 30%, transparent 0%),
linear-gradient(90deg, rgba(242, 245, 245, 1) 30%, transparent 0%),
linear-gradient(90deg, rgba(0, 128, 128, .6) 30%, transparent 0%),
linear-gradient(90deg, rgba(255, 255, 255) 30%, transparent 0%);
background-size: 60px, 30px, 50px, 80px;
}
¥CSS¥
補足
background-imageについてもう少し解説しておきます。
background-imageを使えば、一回で複数枚の画像を指定することができます。
(使用する際はカンマで区切って書けばOK)
background-imageを使えば、一回で複数枚の画像を指定することができます。
(使用する際はカンマで区切って書けばOK)
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
次に、background-imageの複数選択できる特性を活かしてlinear-gradientを90deg(縦置きに)で4色ほど並べます。
最後にbackground-sizeを4色分配置させれば完成です。