첨부파일 https://imweb.eond.com/coding/162712
이미지 없이 CSS로 둥근 모서리 구현하기(1)
간지님께서 알려주신 이 소스는 body의 배경과 div의 배경을 일치시킴으로써 라운드 효과를 내게했다. 27번째줄, 6번째줄

<html>
<head>

<style type="text/css">
body {  font: 14px Arial, Helvetica, sans-serif;
        background-color: #FFFFFF;
        color: #FFFF66;
}
.rblock {
        background-color: #404040;
}
.rblock *.m5 {
        margin: 0 5px;
}
.rblock *.m3 {
        margin: 0 3px;
}
.rblock *.m2 {
        margin: 0 2px;
}
.rblock *.m1 {
        margin: 0 1px;
}
.rblock p.content {
        padding: 0px 10px;
}
.rblocktop, .rblockbottom {
        background-color: #FFFFFF; /* must be of the same as body bg-color */
        display: block;
        width: 100%;
}
.rblocktop *, .rblockbottom * {
        background-color: #404040; /* must be of the same as .rblock bg-color */
        display: block;
        height: 1px;
        overflow: hidden;
}

</style>

</head>

<body>

<div class="rblock" style="width: 500px;">
    <div class="rblocktop">
        <span class="m5"></span><span class="m3"></span><span class="m2"></span><span class="m1"></span><span class="m1"></span>
    </div>       
    <p class="content" style="text-align: justify; text-indent: 0px; /* change this style to whatever you want or remove it */">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure    dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.
    </p>
    <div class="rblockbottom">
        <span class="m1"></span><span class="m1"></span><span class="m2"></span><span class="m3"></span><span class="m5"></span>
    </div>
</div>

</body>
</html>



코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 235 articles in 5 / 12 pages
번호 제목 제목 날짜날짜
공지 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018/01/03
공지 jQuery를 배울수 있는 동네들입니다. 2013/08/09
공지 관련 링크 [1] 2010/05/23
155 주석 표시하기 2009/01/14
154 [Script] 롤오버 메뉴 만들기 [1] 2009/01/18
153 [Script] div 높이 100% 맞추기 2009/01/18
152 [Script] Show-Hide Layers (by 신의키스) 파일 2009/01/19
151 [Script] Show-Hide Layers (by 태그매니아) 파일 [3] 2009/01/20
150 [Script] 롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) [2] 2009/01/20
149 [Script] 위의 메뉴에 마우스를 올리면 밑에 메뉴가 나오는 소스 2009/01/20
148 [Script] 가로 세로가 호환되는 메뉴 파일 2009/01/20
147 [Script] 클릭하면 슬라이드되면서 펼쳐지는 사이드 메뉴 파일 2009/01/20
146 [Script] 메뉴 슬라이딩(가로) 파일 [1] 2009/01/20
145 [Script] 화면 왼쪽에 숨겨진 레이어 꺼내기 파일 [1] 2009/01/20
144 [Script] 간단한 점프메뉴(selecter) 2009/01/20
143 [Script] 스크롤 따라다니는 레이어 [2] 2009/01/20
142 [Script] 스크롤 따라다니는 레이어 2009/01/20
141 [Script] 슬라이딩 레이어 파일 [1] 2009/01/20
140 Cut & Paste CSS Horizontal List Menu 2009/01/20
139 Dolphin CSS Menu 2009/01/20
138 [HTML5] dl과 ul의 상하관계(?)에 대해서 질문드립니다. [1] 2009/01/20
137 탭메뉴형 자바스크립트 2009/01/20
136 드롭다운 가로형 메뉴 2009/01/20

해시태그 디렉터리

오늘의 핫게시물