program story

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

inputbox 2020. 11. 10. 08:05
반응형

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


나는 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*/

가장 간단하고 쉬운 방법은 네면 모두에 그림자를 추가하는 것입니다. 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);
}

네면 모두에 대해이 CSS 코드를 사용하십시오. box-shadow : 0px 1px 7px 0px rgb (106, 111, 109);


다음 링크에서 다른 조합을 할 수 있습니다.
https://www.cssmatic.com/box-shadow

필요한 결과는 다음 CSS로 얻을 수 있습니다.

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);

참고 URL : https://stackoverflow.com/questions/5608222/how-to-apply-box-shadow-on-all-four-sides

반응형