cssのbackgroundは
背景色だけでなく、背景画像の設定などにも用いる
トランプのシャッフル
トランプを5枚横に並べる
box-shadow: 2px 2px 4px #333; //領域にかけるshadow
textにかけるtext-shadowというのもある。
--->ここまで
test2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>トランプ</title>
<link rel="stylesheet" href="test2.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<p><button id="btn">シャッフル</button></p>
<div id="stage">
</div>
<script src="test2.js"></script>
</body>
</html>
--->test2.css
body{
background: #FFc;
}
p {
text-align:center;
}
#stage{
width: 80%;
margin: auto;
display: flex;/*横に並べる*/
flex-wrap: wrap;
}
#stage div{ /*カードの部分*/
font-family: Meiryo;
width: 120px;
background: #fff;
text-align: center;
box-sizing: border-box;/*border込みで幅を確保*/
border: solid 2px;
border-color: #ddd #888 #888 #ddd;
padding: 4rem 0;/*上下4 左右0*/
margin: 10px;
font-size: 1.5rem;
border-radius: 4px;
box-shadow: 2px 2px 4px #333;
}
