border-radius 는 모서리 부분을 둥그렇게 만들어 줍니다.
모서리를 둥글게 만들어 준 모습
보기
border-radius : 5px;
border-radius : 10px;
border-radius : 20px;
소스
<style type="text/css">
.css_test span {
background : #e2e2e2;
padding : 10px;
}
</style>
<div class="css_test">
<span style="border-radius:5px;">border-radius : 5px;</span><br><br>
<span style="border-radius:10px;">border-radius : 10px;</span><br><br>
<span style="border-radius:20px;">border-radius : 20px;</span>
</div>
실습 - 이미지에 적용 해보기 (px 단위)
보기
설명
슬라이더를 움직여 보세요 ^^
실습 - 여러 이미지에 적용 해보기 (% 단위)
보기
설명
- 50% 가 최대값 입니다.
- 대상이 정사각형 이라면 50% 적용시 "원" 이 됩니다.
- 종류별로 이미지를 준비해 보았습니다.
실습 - 여러 이미지에 적용 해보기 (px 단위)
보기
설명
- px 단위는 모서리만 둥글게 만들고 싶을때 사용하면 좋습니다. % 단위 와 비교해 보세요 ^^
실습 - 2개의 속성으로 왼쪽위,오른쪽아래 와 오른쪽위,왼쪽아래 조절하기
보기
실습 - 각 모서리 개별적으로 조절하기
보기
설명
- border-radius : ↖ ↗ ↘ ↙ (왼쪽위 부터 시계방향으로 각 모서리)
실습 - / (슬래시) 를 이용한 모서리 둥굴기 조절
보기
그렇다면 이런걸 어떨까요? ㄷㄷㄷ
보기
설명
- / (슬래시) 를 이용한 각각의 모서리 둥굴기 조절해보기
스타일로 꾸며보기 - DIV 의 진화과정(?)을 살펴봅시다
보기
DIV 로 기본틀을 만듭니다.
배경을 넣어줍니다.
테두리를 만들어줍니다.
테두리를 좀 더 보기 좋게 바꾸어 줍니다.
모서리를 깎아줍니다.
그림자를 만들어 줍니다.
안쪽 그림자를 이용해서 좀 더 보기좋게 해줍니다.
글자에 그림자 효과를 줍니다.
CSS 공작소에 오신것을 환영합니다
소스
<div style="padding:20px;">DIV 로 기본틀을 만듭니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png');">배경을 넣어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px solid #BC8D01;">테두리를 만들어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01;">테두리를 좀 더 보기 좋게 바꾸어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px;">모서리를 깎아줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver;">그림자를 만들어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset;">안쪽 그림자를 이용해서 좀 더 보기좋게 해줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white;">글자에 그림자 효과를 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white; font-weight:bold; font-size:16pt;">CSS 공작소에 오신것을 환영합니다</div>
+ 관련 CSS +