单个<div>,Box-Shadow = 6个cicles.这个怎么运作？
对CSS3-guru来说当然有疑问.我用于box-shadow按钮,模态等.但我从来没有想过我们可以像这样使用.
HTML
<div></div>
CSS
div {
border-radius:50%;
height:2px; width:2px; /* To allow border-radius to work */
position:absolute;
top:50%; left:50%;
margin-top:-1px; margin-left:-1px;
box-shadow:
-75px -125px 0 40px #6cce74,
75px -125px 0 40px #c18d46,
150px 0px 0 40px #c14745,
75px 125px 0 40px #2e1e5b,
-75px 125px 0 40px #9c37a6,
-150px 0px 0 40px #76bdd1;
}
我只看到了代码和结果(没有解释).现在我尝试理解如何使用枚举六(N)盒阴影的单个div渲染它:
OUTPUT
请解释我(或给我链接任何解释),渲染器在这种情况下如何工作.谢谢!
JSFiddle:http://jsfiddle.net/9Rddm/1/.
该box-shadow样式在此处具有以下语法:
box-shadow: [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]+
(来源:MDN) - 其中+表示该组可以重复1次或更多次,并且?表示该值是可选的.
这意味着由第一个点创建的第一个点box-shadow: -75px -125px 0 40px #6cce74,具有相对于它所构成的div的坐标(-75,-125)的偏移量.它的模糊半径为0(因此没有模糊),并且它的扩展半径为40px(因此它的半径为40px).
然后对具有不同坐标和颜色的其他5个点重复该操作.每个阴影获得不同的坐标和不同的颜色,这导致6个点以这种方式定位和着色.
PS:我建议(在Chrome中:)右键单击该小提琴中的结果框,然后单击"Inspect Element"(底部选项),然后向下导航您将找到的DOM树(您将打开一个面板)无论是选择<html>还是<body>选择,您都希望在该树下导航以结束<div>.)在该界面中,您将看到应用于元素的样式.你可以做些什么来使事情更清楚一点是首先点击box-shadow显示的面板样式部分的样式,然后将光标放在你看到的任何数字上,然后按向上/向下箭头.如果按向上/向下箭头,它将输入/减少您选择的数字,并动态更新结果.如果这样做,您可以直接看到您更改的每个值会发生什么.