ex38
๊ทธ๋ฆผ์, shadow
1. text-shadow: x y blur color;
2. box-shadow: x y blur color;
์ง์ ๋ง๋๋ ๊ฒ๋ณด๋ค ๊ตฌ๊ธ๋ง์ถ์ฒ > css shadow example
https://getcssscan.com/css-box-shadow-examples
์ฝ๋
๋๋ณด๊ธฐ
<style>
div:nth-child(1) {
text-shadow: 2px 2px 3px gray;
}
div:nth-child(2) {
border: 1px solid black;
width: 100px;
height: 100px;
margin: 20px;
/* box-shadow: 5px 5px 2px gray; */
}
div:nth-child(2):hover {
/* box-shadow: 5px 5px 2px gray;; */
/* ์ํ */
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;
}
</style>
</head>
<body>
<!-- ex38_shadow.html -->
<div class="item">๋นจ๊ฐ</div>
<div class="item">๋
ธ๋</div>
<div class="item">ํ๋</div>
</body>
</html>ex39
background
1. background-color
2. background-image
3. background-repeat
4. background-position
5. background-attachment
'ํ๋ก๊ทธ๋๋ฐ ๊ณต๋ถ > HTML&CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [ex34~37] CSS(selector-nth:child,์ ์๊ธ,::before) (0) | 2023.04.18 |
|---|---|
| [ex33] CSS(box-sizing) (0) | 2023.04.18 |
| [ex25~28] CSS(position, align) (0) | 2023.04.17 |
| [ex24] CSS(์ด๊ธฐ๊ฐ ์ด๊ธฐํ) (0) | 2023.04.17 |
| [ex21~23] CSS(display, float) (0) | 2023.04.17 |