11個のプロパティ
画像や動画などの置換要素がコンテナにどのようにフィットするかを制御するプロパティです。
object-fit: cover;要素の背景色を指定するプロパティです。
background-color: #f8fafc;要素の背景画像を指定するプロパティです。グラデーションも指定可能です。
background-image: url('hero-bg.jpg');背景画像のサイズを制御するプロパティです。
background-size: cover;背景画像の配置位置を制御するプロパティです。キーワードや数値、パーセントで位置を指定できます。
background-position: center;要素の境界線を指定するプロパティです。幅、スタイル、色を一括設定できます。
border: 1px solid #e5e7eb;要素の角を丸くするプロパティです。
border-radius: 8px;要素に影を付けるプロパティです。複数の影を重ねることも可能です。
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);フォーム部品やチェックボックスなどのアクセント色を指定するプロパティです。
<input type="checkbox" style="accent-color: #f59e42;" checked> オレンジ色のチェックボックスリストのマーカーや記号の種類・位置・画像を指定するプロパティです。
list-style: square inside;要素の表示領域を多角形や円形などで切り抜くプロパティです。
<!-- HTML -->
<div class="circle-clip">CIRCLE</div>
/* CSS */
.circle-clip {
width: 120px;
height: 120px;
background: #3b82f6;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
clip-path: circle(50% at 50% 50%);
}