{"id":5378,"date":"2016-09-29T15:35:50","date_gmt":"2016-09-29T07:35:50","guid":{"rendered":"https:\/\/sdeno.com\/?p=5378"},"modified":"2016-09-29T17:34:28","modified_gmt":"2016-09-29T09:34:28","slug":"css3%e5%80%92%e5%bd%b1%e5%b1%9e%e6%80%a7-box-reflect","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=5378","title":{"rendered":"css3\u5012\u5f71\u5c5e\u6027 box-reflect"},"content":{"rendered":"

\u8c37\u6b4c\u517c\u5bb9<\/span><\/p>\n

CSS\u4ee3\u7801\uff1a<\/h5>\n
.<\/span>reflect-below-p<\/span> {<\/span>\r\n    padding-bottom:<\/span><\/span> 176px<\/span><\/span>;\r\n}<\/span>\r\n.<\/span>reflect-below<\/span> {<\/span>\r\n    -webkit-box-reflect:<\/span><\/span> below;\r\n}<\/span>\r\n.<\/span>reflect-right<\/span> {<\/span>\r\n    -webkit-box-reflect:<\/span><\/span> right;\r\n}<\/span>\r\n.<\/span>reflect-right-translate<\/span> {<\/span>\r\n    -webkit-box-reflect:<\/span><\/span> right 10px<\/span><\/span>;\r\n}<\/span>\r\n.<\/span>reflect-below-mask<\/span> {<\/span>\r\n    -webkit-box-reflect:<\/span><\/span> below 0 linear-gradient(transparent, white);\r\n}<\/span>\r\n.<\/span>reflect-below-img<\/span> {<\/span>\r\n    -webkit-box-reflect:<\/span><\/span> below 0 url(shuai2.png);\r\n}<\/span><\/pre>\n
HTML\u4ee3\u7801\uff1a<\/h5>\n
<<\/span>strong<\/span>><\/span>\u4e0b\u5012\u5f71<\/<\/span>strong<\/span>><\/span>\r\n<<\/span>p<\/span> class<\/span>=<\/span>\"<\/span>reflect-below-p\"<\/span><\/span>><\/span><<\/span>img<\/span> src<\/span>=<\/span>\"<\/span>chaowei.jpg\"<\/span><\/span> class<\/span>=<\/span>\"<\/span>reflect-below\"<\/span><\/span>><\/span><\/<\/span>p<\/span>><\/span>\r\n\r\n\r\n<<\/span>strong<\/span>><\/span>\u53f3\u5012\u5f71<\/<\/span>strong<\/span>><\/span>\r\n<<\/span>p<\/span>><\/span><<\/span>img<\/span> src<\/span>=<\/span>\"<\/span>chaowei.jpg\"<\/span><\/span> class<\/span>=<\/span>\"<\/span>reflect-right\"<\/span><\/span>><\/span><\/<\/span>p<\/span>><\/span>\r\n<<\/span>strong<\/span>><\/span>\u53f3\u5012\u5f71\u540c\u65f6\u6709\u504f\u79fb<\/<\/span>strong<\/span>><\/span>\r\n<<\/span>p<\/span>><\/span><<\/span>img<\/span> src<\/span>=<\/span>\"<\/span>chaowei.jpg\"<\/span><\/span> class<\/span>=<\/span>\"<\/span>reflect-right-translate\"<\/span><\/span>><\/span><\/<\/span>p<\/span>><\/span>\r\n\r\n\r\n<<\/span>strong<\/span>><\/span>\u4e0b\u5012\u5f71\u540c\u65f6\u6709\u906e\u7f69\uff08\u7ebf\u6027\u6e10\u53d8\uff09<\/<\/span>strong<\/span>><\/span>\r\n<<\/span>p<\/span> class<\/span>=<\/span>\"<\/span>reflect-below-p\"<\/span><\/span>><\/span><<\/span>img<\/span> src<\/span>=<\/span>\"<\/span>chaowei.jpg\"<\/span><\/span> class<\/span>=<\/span>\"<\/span>reflect-below-mask\"<\/span><\/span>><\/span><\/<\/span>p<\/span>><\/span>\r\n\r\n\r\n<<\/span>strong<\/span>><\/span>\u4e0b\u5012\u5f71\u540c\u65f6\u6709\u906e\u7f69\uff08\u4f7f\u7528png\u56fe\u7247\uff09<\/<\/span>strong<\/span>><\/span>\r\n<<\/span>p<\/span> class<\/span>=<\/span>\"<\/span>reflect-below-p\"<\/span><\/span>><\/span><<\/span>img<\/span> src<\/span>=<\/span>\"<\/span>chaowei.jpg\"<\/span><\/span> class<\/span>=<\/span>\"<\/span>reflect-below-img\"<\/span><\/span>><\/span><\/<\/span>p<\/span>><\/span><\/pre>\n
<\/div>
<\/div><\/div><\/div>\"daoying\"<\/figure><\/a>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
\u706b\u72d0\u517c\u5bb9<\/span><\/p>\n
CSS\u4ee3\u7801\uff1a<\/h5>\n
.<\/span>reflect-below-mask<\/span> {<\/span>\r\n    -webkit-box-reflect:<\/span><\/span> below 0 linear-gradient(transparent, white);    \r\n}<\/span>\r\n.<\/span>element-reflect-below<\/span> {<\/span>\r\n    width:<\/span><\/span> 150px<\/span><\/span>; height:<\/span><\/span> 176px<\/span><\/span>;\r\n    background:<\/span><\/span> -moz-element(#reflect);\r\n    transform:<\/span><\/span> scaleY(-1);\r\n}<\/span>\r\n.<\/span>element-reflect-below<\/span>:<\/span>before<\/span> {<\/span>\r\n    content:<\/span><\/span> '<\/span>'<\/span><\/span>;\r\n    display:<\/span><\/span> block;\r\n    height:<\/span><\/span> 100%<\/span><\/span>;\r\n    background-image:<\/span><\/span> linear-gradient(to top, hsla(0,0%<\/span><\/span>,100%<\/span><\/span>,0), white);\r\n}<\/span>\r\n\r\n.<\/span>spin<\/span> {<\/span>\r\n    animation:<\/span><\/span> spin 3s infinite linear;\r\n}<\/span>\r\n@<\/span>keyframes<\/span> spin {<\/span>\r\n    form {<\/span> transform:<\/span><\/span> rotate(0); }<\/span>    \r\n    to {<\/span> transform:<\/span><\/span> rotate(360deg); }<\/span>    \r\n}<\/span><\/pre>\n
HTML\u4ee3\u7801\uff1a<\/h5>\n
<<\/span>p<\/span>><\/span><<\/span>strong<\/span>><\/span>\u4e0b\u5012\u5f71\u540c\u65f6\u6709\u906e\u7f69\uff08\u7ebf\u6027\u6e10\u53d8\uff09<\/<\/span>strong<\/span>><\/span><\/<\/span>p<\/span>><\/span>\r\n<<\/span>div<\/span> id<\/span>=<\/span>\"<\/span>reflect\"<\/span><\/span> class<\/span>=<\/span>\"<\/span>wrap\"<\/span><\/span>><\/span><<\/span>img<\/span> src<\/span>=<\/span>\"<\/span>chaowei.jpg\"<\/span><\/span> class<\/span>=<\/span>\"<\/span>reflect-below-mask\"<\/span><\/span>><\/span><\/<\/span>div<\/span>><\/span>\r\n<<\/span>div<\/span> class<\/span>=<\/span>\"<\/span>element-reflect-below\"<\/span><\/span>><\/span><\/<\/span>div<\/span>><\/span>\r\n<<\/span>p<\/span>><\/span><<\/span>button<\/span> id<\/span>=<\/span>\"<\/span>button\"<\/span><\/span>><\/span>\u56fe\u7247\u8f6c\u8d77\u6765<\/<\/span>button<\/span>><\/span><\/<\/span>p<\/span>><\/span><\/pre>\n
<\/div>
<\/div><\/div><\/div>\"daoying2\"<\/figure><\/a>\n
 <\/p>\n
\u00a0IE\u517c\u5bb9<\/span><\/p>\n
HTML\u4ee3\u7801\uff1a<\/h5>\n
<<\/span>svg<\/span> width<\/span>=<\/span>\"<\/span>150\"<\/span><\/span> height<\/span>=<\/span>\"<\/span>352\"<\/span><\/span>><\/span>\r\n  <<\/span>defs<\/span>><\/span>\r\n      <<\/span>linearGradient<\/span> id<\/span>=<\/span>\"<\/span>gradient\"<\/span><\/span> x1<\/span>=<\/span>\"<\/span>0\"<\/span><\/span> y1<\/span>=<\/span>\"<\/span>0\"<\/span><\/span> x2<\/span>=<\/span>\"<\/span>0\"<\/span><\/span> y2<\/span>=<\/span>\"<\/span>1\"<\/span><\/span>><\/span>\r\n      <<\/span>stop<\/span> offset<\/span>=<\/span>\"<\/span>0%\"<\/span><\/span>   stop-color<\/span>=<\/span>\"<\/span>#fff\"<\/span><\/span> stop-opacity<\/span>=<\/span>\"<\/span>0\"<\/span><\/span>\/><\/span>\r\n      <<\/span>stop<\/span> offset<\/span>=<\/span>\"<\/span>100%\"<\/span><\/span> stop-color<\/span>=<\/span>\"<\/span>#fff\"<\/span><\/span> stop-opacity<\/span>=<\/span>\"<\/span>1\"<\/span><\/span>\/><\/span>\r\n    <\/<\/span>linearGradient<\/span>><\/span>\r\n    <<\/span>mask<\/span> id<\/span>=<\/span>\"<\/span>mask\"<\/span><\/span>><\/span>\r\n      <<\/span>rect<\/span> x<\/span>=<\/span>\"<\/span>0\"<\/span><\/span> y<\/span>=<\/span>\"<\/span>176\"<\/span><\/span> width<\/span>=<\/span>\"<\/span>150\"<\/span><\/span> height<\/span>=<\/span>\"<\/span>177\"<\/span><\/span> fill<\/span>=<\/span>\"<\/span>url(#gradient)\"<\/span><\/span>  \/><\/span>\r\n    <\/<\/span>mask<\/span>><\/span>\r\n    <<\/span>pattern<\/span> id<\/span>=<\/span>\"<\/span>reflect\"<\/span><\/span> patternUnits<\/span>=<\/span>\"<\/span>userSpaceOnUse\"<\/span><\/span> width<\/span>=<\/span>\"<\/span>150\"<\/span><\/span> height<\/span>=<\/span>\"<\/span>176\"<\/span><\/span>><\/span>\r\n      <<\/span>image<\/span> xlink:href<\/span>=<\/span>\"<\/span>chaowei.jpg\"<\/span><\/span> width<\/span>=<\/span>\"<\/span>150\"<\/span><\/span> height<\/span>=<\/span>\"<\/span>176\"<\/span><\/span> \/><\/span>\r\n    <\/<\/span>pattern<\/span>><\/span>\r\n  <\/<\/span>defs<\/span>><\/span>\r\n  <<\/span>rect<\/span> x<\/span>=<\/span>\"<\/span>0\"<\/span><\/span> y<\/span>=<\/span>\"<\/span>0\"<\/span><\/span> width<\/span>=<\/span>\"<\/span>150\"<\/span><\/span> height<\/span>=<\/span>\"<\/span>176\"<\/span><\/span> fill<\/span>=<\/span>\"<\/span>url(#reflect)\"<\/span><\/span>><\/span><\/<\/span>rect<\/span>><\/span>\r\n  <<\/span>rect<\/span> x<\/span>=<\/span>\"<\/span>0\"<\/span><\/span> y<\/span>=<\/span>\"<\/span>176\"<\/span><\/span> width<\/span>=<\/span>\"<\/span>150\"<\/span><\/span> height<\/span>=<\/span>\"<\/span>176\"<\/span><\/span> fill<\/span>=<\/span>\"<\/span>url(#reflect)\"<\/span><\/span> mask<\/span>=<\/span>\"<\/span>url(#mask)\"<\/span><\/span> transform<\/span>=<\/span>\"<\/span>translate(75 264) scale(1, -1) translate(-75 -264)\"<\/span><\/span>><\/span><\/<\/span>rect<\/span>><\/span>\r\n<\/<\/span>svg<\/span>><\/span><\/pre>\n
\u5177\u4f53\u67e5\u770b\uff1ahttp:\/\/www.zhangxinxu.com\/wordpress\/2016\/08\/webkit-box-reflect-moz-element\/<\/a><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u8c37\u6b4c\u517c\u5bb9 CSS\u4ee3\u7801\uff1a .reflect-below-p { padding-bottom: 176px; } […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5378","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5378"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5378\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}