CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3を使用したボックスサイズ設定によるレイアウトの作成

CSS3を使用してボックスサイズのレイアウトを作成するには、コードは次のとおりです-

例

<!DOCTYPE html>
<html>
<head>
<style>
body{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container{
   width: 500px;
   border:8px solid rgb(35, 0, 100);
}
.border {
   box-sizing: border-box;
   width: 100%;
   height: 100px;
   border: 4px solid rgb(4, 97, 54);
}
.content {
   width: 100%;
   height: 100px;
   padding: 50px;
   border: 4px solid rgb(255, 0, 191);
   box-sizing: content-box;
}
</style>
</head>
<body>
<h1>Box sizing layout example</h1>
<div class="container">
<div class="border">This div has 100% width and box-sizing property set to border
box</div>
<br>
<div class="content">This div also has 100% width but has the box-sizing property set to
content box</div>
</div>
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSS3を使用したボックスサイズ設定によるレイアウトの作成


  1. CSS3放射状グラデーションの作成

    ラジアルグラデーションの場合、カラーストップを設定します。デフォルトの形状は楕円ですが、円などの他の形状を設定することもできます。 CSSの放射状グラデーションに少なくとも2つのカラーストップを設定します。 以下は、CSSを使用して放射状グラデーションを作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }

  2. ボックスサイズを使用したCSS3ボックス幅

    box-sizingプロパティを使用して、要素の幅だけでなく高さも変更します。 以下は、CSS3-を使用したボックスサイズ設定でのボックス幅のコードです。 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    width: 200px;    height: 200px; &n