Tôi tự hỏi về sự hỗ trợ cho bóng bên trong cụ thể bên trong css3.
Tôi biết điều này hoạt động tốt trên các trình duyệt được hỗ trợ.
div { box-shadow:inset 0px 1px 5px black; }
Tôi chỉ tò mò không biết có cách nào để đạt được điều gì đó như:
div { box-shadow-top:inset 0px 1px 5px black; }
Câu trả lời:
Đây là những gì làm việc cho tôi:
box-shadow: inset 1px 4px 9px -6px;
Ví dụ: http://jsfiddle.net/23Egu/
box-shadow: inset 1px -4px 9px -6px;bóng dưới.
box-shadow: inset 4px 1px 9px -6px; bên phải:box-shadow: inset -4px 1px 9px -6px;
Tôi không nghĩ rằng bạn thực sự cần box-shadow-topvì nếu bạn đặt offsetxthành 0 và offsetythành bất kỳ giá trị dương nào thì chỉ có bóng còn lại ở trên cùng.
nếu bạn muốn có bóng ở trên và bóng ở dưới, bạn chỉ có thể sử dụng hai div:
<div style="box-shadow:inset 0 1px 5px black;">
<div style="box-shadow:inset 0 -1px 5px black;">
some content
</div>
</div>
nếu bạn muốn loại bỏ bóng ở các bên, hãy sử dụng rgbathay vì hexmàu và đặt lớn hơn offsety:
box-shadow:inset 0 5px 5px rgba(0,0,0,.5)
bằng cách này, bạn cung cấp cho bóng đổ có độ mờ hơn để các bên luôn bị ẩn và với độ bù trừ nhiều hơn, bạn sẽ có được độ mờ ít hơn
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
background: #1C1C1C;
}
div {
margin: 50px auto;
width: 200px;
height: 200px;
background: #fff;
-webkit-border-radius: 20px;
-khtml-border-radiust: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
box-shadow:inset 0px 5px 5px rgba(0,0,0,.5);
}
div > div {
background:none;
box-shadow:inset 0px -5px 5px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div><div></div></div>
</body>
</html>
box-shadow-topsẽ cung cấp. chỉnh sửa Nhưng đó là cách tôi cũng thường làm =)
rgbathay vì hexmàu và đặt lớn hơn offsety: box-shadow: 0 5px 5px rgba (0,0,0, .5) theo cách này, bạn tạo bóng mờ hơn để các bên luôn bị ẩn và với nhiều bù đắp hơn, bạn sẽ có được ít độ mờ hơn
box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black;
bằng cách sử dụng :beforevà aftercác phần tử có bóng thông thường bị cắt bởi overflow:hiddenhộp mẹ như trong ví dụ này: http://dabblet.com/gist/2585782
/**
* Top and Bottom inset shadow
*/
#element{
background-color: #E3F2F7;
height: 55px;
position: relative; /* to position pseudo absolute*/
overflow: hidden; /* to cut of overflow shadow*/
margin-top: 200px;
}
#element:before , #element:after{
content: "\0020";
display: block;
position: absolute;
width: 100%;
height: 1px; /* when 0 no shadow is displayed*/
box-shadow: #696c5c 0 0 8px 0;
}
#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px} /* because of height: 1*/
<div id="element"></div>
Bạn có thể sử dụng gradient nền cho tác phẩm trong hầu hết các trường hợp:
Ví dụ về SCSS (với la bàn):
@include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
Công việc này thật đáng yêu :)
Đây là codepen minh họa nó: http://codepen.io/poopsplat/pen/cGBLy
Đối với cùng một bóng nhưng chỉ ở trên cùng:
box-shadow: inset 0px 6px 5px -5px black;
Để có bóng theo một hướng, bạn phải phủ định thông số "mờ" bằng thông số "spread" và sau đó điều chỉnh thông số "h-pos" và / hoặc "v-pos" bằng cùng một giá trị này. Nó không hoạt động với đường viền đối diện hoặc đường viền ba. Bạn phải thêm một định nghĩa nữa.
Các ví dụ khác tại đây: http://codepen.io/GBMan/pen/rVXgqP
Không, không trực tiếp, nhưng bạn có thể cắt bỏ những phần mà bạn không muốn bằng cách đặt nó vào một div với overflow: hidden:
Tôi chỉ gặp vấn đề này bản thân mình. Giải pháp mà tôi tìm thấy là với nhiều hộp bóng (mỗi bên một bóng mà bạn muốn có bóng của mình). Đây là định nghĩa:
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Đây là cách nghĩ về nó:
Ở đây bạn có thể thấy trường hợp của tôi với hộp bóng ở ba mặt (trái, trên, phải và dưới cùng màu với nền để tạo ra hiệu ứng mà tôi muốn - bên trái và bên phải đi xuống dưới cùng ) https://codepen.io/cponofrei/pen/eMMyQX
Bạn có thể tạo bóng một mặt, bóng bên trong bằng cách đặt div của bạn thành overflow:hiddenvà thêm các phần tử bóng dọc theo đường viền.
Đặt bóng bên trong trên đường viền trên cùng và dưới cùng của một vạch chia:
HTML
<div id="innerShadow">
<div id="innerShadowTop">
Content...
<div id="innerShadowBottom">
</div>
CSS
#innerShadow
{
position: relative;
overflow: hidden;
}
#innerShadowTop
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
top: -1px;
-moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}
#bannerShadowBottom
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
-moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}
insetvà sáng tạo bằng cách sử dụng các giá trị của css box-shadow. Hãy nhớ rằng bạn có thể xếp chồng các bóng hộp trên cùng một phần tử. Vì vậy, người ta có thể sử dụng một cái gì đó như @Jakobud đã nói trong một bình luận ở trên: box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black; Một cách khác, chỉ hơi khó chịu hơn là thêm đánh dấu không cần thiết, là sử dụng :beforevà :afterbộ chọn. Nhưng tại sao phải làm điều đó nếu bạn có thể làm điều đó bằng cách trực tiếp chọn và tạo kiểu cho phần tử gốc.
box-shadowlà cho cả bốn mặt. Bạn không thể thay đổi điều đó (chưa?). 4 kích thước trong box-shadowđịnh nghĩa là OffsetX, offsetY, Blurvà Spread.
Inset/Outset, OffsetX, OffsetY, BlurRadius, SpreadRadiusvà Color. Như những người khác đã chỉ ra, bạn có thể chỉ định một bên như thế nàybox-shadow: inset 0 8px 6px -6px black;
Nhiều bóng hộp đã giúp tôi.
box-shadow:
inset 0 -8px 4px 4px rgb(255,255,255),
inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);