[css] 네면 모두에 박스 섀도우를 적용하는 방법은 무엇입니까?

Program / 글쓴이

나는 box-shadow4면 모두 에 적용하려고 노력하고 있습니다 . 나는 2면에서만 얻을 수 있습니다.

답변

x 및 y 오프셋 때문입니다. 이 시도:

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

편집 (년 후 ..) : 의견에서 요청 한대로 브라우저 간 답변을 더 많이 만들었습니다. 🙂

btw : 요즘에는 많은 css3 생성기가 있습니다 ..
css3.me , css3maker , css3generator 등 …

답변

참조 : http://jsfiddle.net/thirtydot/cMNX2/8/

input {
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}

답변

멋지네요.

-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;

답변

이 코드처럼 간단합니다.

box-shadow: 0px 0px 2px 2px black; /*any color you want*/

답변

box-shadow 구문을 이해하고 그에 따라 작성하십시오.

box-shadow: h-offset v-offset blur spread color;

h-offset : 그림자의 수평 오프셋. 양수 값은 그림자를 상자의 오른쪽에 배치하고 음수 값은 그림자를 상자의 왼쪽에 배치-필수

v-offset : 그림자의 수직 오프셋. 양수 값은 그림자를 상자 아래에 배치하고 음수 값은 그림자를 상자 위에 배치합니다.-필수

흐림 : 흐림 반경 (숫자가 클수록 그림자가 더 흐려짐)-선택 사항

color : 그림자 색상-선택 사항

확산 : 확산 반경. 양수 값은 그림자 크기를 늘리고 음수 값은 그림자 크기를 줄입니다.-선택 사항

삽입 : 그림자를 외부 그림자에서 내부 그림자로 변경합니다.-선택 사항

box-shadow: 0 0 10px #999;

상자 그림자는 스프레드와 함께 더 잘 작동합니다.

box-shadow: 0 0 10px 8px #999;

‘삽입’을 사용하여 상자 내부에 그림자를 적용하십시오.

box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;

rgba (빨간색 녹색 파란색 알파)를 사용하여 그림자를보다 효율적으로 조정합니다.

box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8);
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);

답변

가장 간단하고 쉬운 방법은 네면 모두에 그림자를 추가하는 것입니다. CSS

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/

답변

http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ 사이트를 찾았습니다 .

.allSides
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}