Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- Transform
- window.open
- Semantic
- 툴팁
- 태그
- onclick
- script
- 가상 클래스
- absolute
- 시맨틱
- position
- HTML
- 새창열기
- googlechart
- 페이지 이동
- relative
- 깜박임
- JavaScript
- Semantic tag
- css3
- 팝업
- 가상 요소
- html5
- jQuery
- 구글차트
- 시맨틱 태그
- window open
- jQuery UI
- tag
- translate
Archives
- Today
- Total
무아지경
border-radius 본문
border-radius
- 네모난 박스의 테두리를 둥글게 하는 기능
- 단위는 px, %를 사용할 수 있다.
- 원을 만들때는 정사각형의 박스를 코딩하고(width, height:값일 동일) border-radius:50%; 를 사용한다.
- border-radius: OOpx OOpx OOpx OOpx; (왼쪽위 오른쪽위 오른쪽아래 왼쪽아래 순..) 으로 사용하여 원하는 코너만 둥글게 표현 가능하다.
- 직접 원하는 코너를 지정 하는 방법도 있다.
1 | div { width:300px; height: 300px; background:#a9ddf2; margin:50px; border-top-left-radius: 60px; border-bottom-right-radius: 60px; } | cs |
1 | div { width:300px; height: 300px; background:#a9ddf2; margin:50px; border-radius: 30px / 90px; } | cs |
'퍼블리싱 > HTML5 + CSS3' 카테고리의 다른 글
window.open() 팝업창 띄우기 (0) | 2018.07.05 |
---|---|
유튜브 동영상 반응형 (0) | 2018.07.05 |
button 디자인시 유의할 점 (0) | 2018.05.30 |
mailto:...@..." (이메일/전화/문자 링크 걸기) (0) | 2018.05.30 |
box-sizing:border-box (0) | 2018.05.30 |
Comments