тень на элементе фигуры перекошена из-за корневого поля

Question

тень на элементе фигуры перекошена из-за корневого поля

0

Я предоставил box-shadow на figure. Но изображение кажется искаженным из-за *{margin:10px} который я дал. Есть ли способ, которым я могу сохранить этот запас и смогу приземлить тень коробки только на элементе фигуры?

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
    rel="stylesheet"
    href="drop.css"
>

</head>
<body>

    <section id="pics">
        <figure
            id="pic1"
            class="pictures"
        >
            <img
                alt="figure1"
                src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
                title="pic1"
            >
            <figcaption class="figuredetails">Fig1</figcaption>

        </figure>


        <figure
            id="pic2"
            class="pictures"
        >
            <img
                alt="figure2"
                src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
                title="pic2"
            >
            <figcaption class="figuredetails">Fig2</figcaption>

        </figure>
    </section>
    <section id="content">
    <p>hello</p>
    </section>
</body>


</html>

CSS:

@CHARSET "UTF-8";
*{
    margin: 10px;
    /* padding: 10px; */

}


#pics{

    width:100%;
    padding: 50px 50px;
} 

.pictures{
    float: left;
    width:200px;
    height:200px;
    box-shadow: 10px 10px 5px #888888;
}

.pictures:before{
    border:5px solid black;
}
.pictures:after{
    border:5px solid black;
}


.pictures img{
    width:100%;
    height:auto;
    border: 2px solid;

    border-color: #ff0000;



}

/* #pic1{

    -ms-transform: rotate(30deg); IE 9
    -webkit-transform: rotate(30deg); Chrome, Safari, Opera
    transform: rotate(30deg);
} */


#pic2{
    padding-left: 50px;
}

#content{
    clear: both;
}

.pictures > .figuredetails{
    color: red;
    padding-left: 20px;
}

JSfiddle здесь:

http://jsfiddle.net/5kgh8/

GodMan 14 апр. 2014, в 20:15

Источник

0

Какой вывод вы точно хотите. Можете ли вы просто показать нам изображение?
Zword 14 апр. 2014, в 17:51
0

Я не могу показать изображение. Я просто хочу, чтобы изображение было только внутри коробки, которая дает тень.
GodMan 14 апр. 2014, в 17:53
0

Что-нибудь вроде этого: jsfiddle.net/r83P7 ?
Zword 14 апр. 2014, в 18:01
0

Да. Но я хочу сохранить маржу и все еще хочу другой рис
GodMan 14 апр. 2014, в 18:21

Показать ещё 2 комментария

Теги:

html

css

html5

css3

1 ответ

Ещё вопросы

Какой вывод вы точно хотите. Можете ли вы просто показать нам изображение?
Я не могу показать изображение. Я просто хочу, чтобы изображение было только внутри коробки, которая дает тень.
Что-нибудь вроде этого: jsfiddle.net/r83P7 ?
Да. Но я хочу сохранить маржу и все еще хочу другой рис

user3339224 · Answer 1 · 2014-04-14T15-55-00.000Z

Поскольку в ваших первых комментариях говорится, что вы хотите, чтобы изображения отображались внутри теневого окна, вам нужно всего лишь удалить

#pic2{
padding-left: 50px;
}

Также я не использую

*{
   margin: 10px;
   /* padding: 10px; */
}

Удалите это также.

Результат: JsFiddle

На самом деле, padding-left в #pic2 должен позаботиться о повороте pic1, который я собираюсь сделать, и дать pic2 некоторое пространство после pic1. Кроме того, margin используется для того, чтобы весь контент начинался через некоторое пространство слева, например, временная шкала facebook всегда находится на некотором расстоянии слева