나는 box-shadow4면 모두 에 적용하려고 노력하고 있습니다 . 나는 2면에서만 얻을 수 있습니다.
네면 모두에 박스 섀도우를 적용하는 방법은 무엇입니까?
답변:
x 및 y 오프셋 때문입니다. 이 시도:
-webkit-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
편집 (년 후 ..) : 의견에서 요청 한대로 브라우저 간 답변을 더 많이 만들었습니다. :)
btw : 요즘에는 많은 css3 생성기가 있습니다 .. css3.me , css3maker , css3generator 등 ...
더 작은 반경과 스프레드 값으로 더 좋아 보이지만 정답을 더 빨리 얻었 기 때문입니다.
—
thirtydot 2011
감사. 나는 질문 잘못 :) 가지고 있음을, 당신의 첫 번째 대답과 생각을보고 있었다
—
Damb
더 많은 브라우저 간 답변을 작성해야합니다.
—
Lucas
왜 그런지 모르겠지만 이것은 저에게 효과가 없습니다. 이것을 사용할 때 상자 그림자가 없습니다. @thirtydot가 게시 한 답변을 사용하면 작동합니다. 처음 두 값이 0이면 블러와 스프레드가 있어야합니다. 이것은 Chrome에서 발생합니다.
—
Charles Williams
@thirtydot-당신이 맞아요, 더 밝은 배경으로 볼 수 있습니다. 그러나 배경이 검은 색이면 전혀 볼 수 없습니다. 그래서 나는 그것이 작동하지 않는다고 말해서는 안됩니다. 그러나 상자 그림자의 색상에 관계없이 검정색 배경이 있으면 스프레드 없이는 확실히 보이지 않습니다. 빨간색으로도 테두리가 약간 빨간색으로 보이지만 "보이는"상자 그림자가 없습니다. 따라서 배경이 더 밝 으면이 솔루션이 효과가있을 것 같습니다. 매우 어두운 배경의 경우이 솔루션은 신뢰할 수 없습니다. jsfiddle.net/vkzd71rc 대 jsfiddle.net/vkzd71rc/1
—
Charles Williams 19
참조 : 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;
}
3 값 + 색상으로 상자 그림자에서 각 값이 무엇인지 알고 있습니다. 이 4 값은 무엇을 의미합니까 ??
—
dragonfly
읽기 : developer.mozilla.org/En/CSS/Box-shadow- 특히 "확산 반경"입니다.
—
thirtydot 2011
바이올린 제작자-MVP.
—
Terrance00
멋지네요.
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
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);
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);
}
이 사이트의 다른 답변으로도 적절하지만, 노력하는 동안 나는 당신의 답변에 투표하고 있습니다.
—
blueray
CSS3 box-shadow : 4면 대칭
- 같은 색의 양면
:root{
--color: #f0f;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background: #ccc;
}
.four-sides-with-same-color {
box-shadow: 0px 0px 10px 5px var(--color);
}<div class="four-sides-with-same-color"></div>
- 각기 다른 색으로
:root{
--color1: #00ff4e;
--color2: #ff004e;
--color3: #b716e6;
--color4: #FF5722;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background-color: rgba(255,255,0,0.7);
}
.four-sides-with-different-color {
box-shadow:
10px 0px 5px 0px var(--color1),
0px 10px 5px 0px var(--color2),
-10px 0px 5px 0px var(--color3),
0px -10px 5px 0px var(--color4);
}<div class="four-sides-with-different-color"></div>스크린 샷
심판
네면 모두에 대해이 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);