지난 몇 년 동안, 나는 여전히 CSS 레이아웃을 배웠지 만 나와 함께 감당해야한다. 내가 Photoshop에서 생성 한 둥근 모서리가있는 컨테이너를 만들려고합니다. 컨테이너의 배경은 흰색이므로 왼쪽 위 모서리, 위쪽, 오른쪽 위 모서리, 오른쪽, 아래쪽 오른쪽 모서리, 아래쪽, 왼쪽 아래 모서리 및 왼쪽의 8 개 이미지가 있습니다.간단한 CSS 스케일 - 나인 레이아웃
가장자리에 그림자가 생겨서 예, 8면이 필요합니다. CSS로 어떻게 배치할까요? 나는 테이블 + CSS로 비참하게 시도하고 실패했습니다. div를 사용하면 어떻게됩니까?
편집 : 간단하게 나는이 HTML로 작성하는 경우 내가
[IMG][IMG WIDTH="100%"][IMG]
아래 의사 코드 같은 것을 배치 얼마나, 말하기, 내 이미지가 세 줄에 걸쳐 분할됩니다. 한 줄에 모두 맞추려면 어떻게해야합니까?
체크 아웃 : 모든 브라우저에서 -webkit-border-radius: 10px;을하고 CSS 속성 라운드있는 모든 모서리를합니다 Curvy Corners, 그것은 당신의 CSS보고 웹킷에 대한 CSS3 호텔을 찾을 것입니다 jQuery 플러그인입니다.
IE 용으로 사용해도 훌륭합니다. .js 파일을 디렉토리에 추가하고 HTML 하단에 링크하면 모든 작업이 완료됩니다.
당신 말이 맞아. CSS는 지금 당황 스럽습니다. 분명 JS가 이런 일이 일어나는 유일한 방법입니다 : - | –
여기에는 여러 가지 방법으로 http://www.devwebpro.com/25-rounded-corners-techniques-with-css/이 있습니다.
모든 솔루션은 5 이미지 이하를 사용하여 둥근 모서리를 수행하려고합니다. 즉, 유동적 솔루션이 아닙니다. CSS만으로도 이러한 항목을 배치 할 수있는 다른 장소가 있습니까? –
Dan Cederholm (www.simplebits.com)은 http://simplebits.com/publications/bulletproof/code/ 초보자 용 코드 샘플, 5 장을 참조하십시오. – Jonathan
저는 매튜 제임스 테일러 (Matthew James Taylor)가 함께 저술 한 튜토리얼을 좋아합니다. 이 자습서는 둥근 모서리를 많이 사용하지는 않지만 CSS 레이아웃 아이디어에 유용합니다.
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths
자습서를 아주 잘 살펴보고 확인해야합니다. 그들을 밖으로 :) –
모든 브라우저에서 반올림해야합니까? 이것은 이미지가없는 CSS3에서 가능합니다. 이 [CSS3 Generator] (http://css3generator.com/)를 확인하십시오. 이미지를 사용하여 둥근 모서리를 완전히 포기했습니다. 승리를위한 점진적인 향상 ... –