如何移动盒子阴影？

Question

这是CSS如何描述

.hint {
 background: url('/triangle.png') center right no-repeat;
 padding-right: 10px;
 box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.25);
}

如何移动阴影10px？

Answer 1

你可以用CSS完成所有操作（不需要图像）：

.hint {
    background:#F85B58; 
    display:inline-block;
    position:relative;
    color:white;
    padding:20px;
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.25);
}
.hint:before, .hint:after {
    content:" ";
    display:block;
    position:absolute;
    top:50%;
    left:100%;
    width:0px; 
    height:0px; 
    overflow:hidden;
    margin-top:-10px;
    border:10px solid transparent;
    border-left-color:#F85B58;
}
.hint:before {
    margin-top:-8px;
    border-left-color:rgba(0, 0, 0, 0.25);
}

请参阅：http://jsfiddle.net/ro9nfhw6/

更改border-width以使箭头更加锐利（根据您的示例）：

.hint:before, .hint:after {
    border-width:6px 10px;
}

例如：http://jsfiddle.net/ro9nfhw6/1/

Answer 2

 .hint-outer {
    background: url('/triangle.png') center right no-repeat;
    padding-right: 10px;
 }

 .hint-inner {
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.25);
    height: 100px;
 }


 <div class="hint-outer"><div class="hint-inner"></div></div>