CSS Рядом с моими круглыми углами слишком много пикселей - PullRequest
Новая
       11

CSS Рядом с моими круглыми углами слишком много пикселей

0 голосов
/ 22 ноября 2011

Я создал макет, который содержит закругленные углы, сделанные с помощью CSS.Углы отображаются правильно, но рядом с ними слишком много пикселей.Я проверил свою графику, но они не содержат эти пиксели.

Вот мой CSS-код: 

<style>
div.box {background:url(fld_sel_center_left.png) repeat-y;}
div.box div {background:url(fld_sel_center_right.png) right repeat-y;}
div.box div div {background:url(fld_sel_head_background.png) repeat-x;}
div.box div div div {background:url(fld_sel_buttom_center.png) bottom repeat-x;}
div.box div div div div {background:url(fld_sel_head_left.png) left top no-repeat;}
div.box div div div div div {background:url(fld_sel_head_right.png) right top no-repeat;}
div.box div div div div div div {background:url(fld_sel_buttom_left.png) left bottom no-repeat;}
div.box div div div div div div div {background:url(fld_sel_buttom_right.png) right bottom no-repeat;}

div.content{padding: 40px 10px 15px 20px;}
</style>

и HTML-код для DIV: 

<div class="box">
 <div>
      <div>
           <div>
                <div>
                     <div>
                          <div>
                               <div>
                                    <div class="content">
                                          content<br />
                                           content<br />
                                           content<br />
                                           content<br />
                                    </div>
                               </div>
                          </div>
                     </div>
                </div>
           </div>
      </div>
 </div>

И здесь вы видите проблему:

enter image description here

Ответы [ 4 ]

3 голосов
/ 22 ноября 2011

Разве вы не слышали о свойстве border-radius (для всех браузеров) и CSS3PIE (для старых IE)?

Просто используйте: 

<div class="content">
content<br />
</div>

тогда в CSS 

.content {
    border-radius:30px;
}

Затем прочитайте документацию по CSS3PIE , если вам это нужно для работы в старом IE.

1 голос
/ 22 ноября 2011

Вы можете поиграться с этими атрибутами:

bottom: ширина: высота: margin-top: margin-bottom: margin-left: margin-right: padding-left: padding-right:

Например,

, приведенный ниже код создаст одну большую синюю коробку с одной маленькой белой рамкой в ​​центре:

CSS: 

.box
{
position:absolute;

width:30%;
height:30%;   
margin-left: 10%;
margin-top: 30%; 
margin-right: 5px;
padding-left: 30px;
padding-right: 5px;
text-align: center;

background: white;


}

.workarea {
    position:absolute;

width:10%;
height:10%;   
margin-left: 10%;
margin-right: 10px;
padding-left: 10px;
padding-right: 10px;
text-align: center;

background: blue;


}

html: 

</head>
<body>

        <div id="workarea" class="workarea">
              <div id="box" class="box">
              </div>
         </div>

</body>


</html>
0 голосов
/ 22 ноября 2011

Полагаю, ваши фоновые изображения содержат синий цвет.Вам нужно будет изменить CSS, чтобы фоновые изображения не перекрывали друг друга.

Без просмотра реальных фоновых изображений, с которыми вы работаете, немного сложнее быть более конкретным.

0 голосов
/ 22 ноября 2011

Вы пытались включить margin:0 и padding:0 для div'ов. Я думаю, эта проблема зависит от браузера. Вы проверили в других браузерах и можете ли вы также включить изображения?

Также вы можете попробовать z-index, назначив div'ам position:absolute и поместите их друг на друга, чтобы избежать пробелов.

...