当用户点击/触摸时，CSS盒子阴影效果

Question

我想在触摸/触摸时为页面中特定div设置盒子阴影效果。怎么做？

我已经尝试创建一个带有阴影阴影的类，并将其与.className:active事件分配到div中。它正在工作一点点。但问题是当用户触摸并拖动该div时，box-shadow效果不会被取消。

Answer 1

您可以通过:active:focus “取消”拖动。

---

它意味着你得到的div只:active的box-shadow属性和光标必须focus。

为例：

div { 
 
    width: 100px; 
 
    padding: 5px; 
 
    background: #ddd; 
 
    text-align: center; 
 
} 
 

 
div:active:focus { 
 
    box-shadow: 0px 0px 5px 0px gray; 
 
}

<div> 
 
    shadow 
 
</div>

Answer 2

.ico-btn { 
 
    -webkit-user-select: none; margin-right: 0px; 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 2px 10px 0px, rgba(0, 0, 0, 0.0980392) 0px 0px 1px 0px, rgba(255, 255, 255, 0.247059) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset; 
 
    -webkit-font-smoothing: antialiased; 
 
    border-bottom-left-radius: 25%; 
 
    border-bottom-right-radius: 25%; 
 
    border-top-left-radius: 25%; 
 
    border-top-right-radius: 25%; 
 
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 2px 10px 0px, rgba(0, 0, 0, 0.0980392) 0px 0px 1px 0px, rgba(255, 255, 255, 0.247059) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset; 
 
    cursor: pointer; 
 
    display: block; 
 
    font-family: Roboto, Arial, sans-serif; 
 
    font-size: 140px; 
 
    font-weight: normal; 
 
    height: 177px; /*167px;*/ 
 
    line-height: 150px; 
 
    min-width: 0px; 
 
    padding: 40px 0 0 0; /*30*/ 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    width: 220px;/*200*/ 
 
    z-index: 2; 
 
    margin: 0 auto; 
 
    color:#fff; 
 
} 
 

 
.ico-btn.red { background-color: rgb(219, 68, 55); 
 
    border-bottom-color:#ab2318; 
 
    border-bottom-left-radius: 25%; 
 
    border-bottom-right-radius: 25%; 
 
    border-bottom-style: solid; 
 
    border-bottom-width: 1px; 
 
    border-left-color: rgb(0, 0, 0); 
 
    border-left-style: none; 
 
    border-left-width: 0px; 
 
    border-right-color: rgb(0, 0, 0); 
 
    border-right-style: none; 
 
    border-right-width: 0px; 
 
    border-top-color:#ef675c; 
 
    border-top-left-radius: 25%; 
 
    border-top-right-radius: 25%; 
 
    border-top-style: solid; 
 
    border-top-width: 2px; 
 
    transition: all .1s linear; 
 
} 
 
.ico-btn.red:hover { 
 
\t background-color: #D05944; 
 
\t -webkit-transition: background-color .25s ease-in-out; 
 
\t -moz-transition: background-color .25s ease-in-out; 
 
\t -o-transition: background-color .25s ease-in-out; 
 
\t transition: background-color .25s ease-in-out; 
 
}

<div role="button" class="ico-btn red"><span class="icon-sad"></span> 
 
</div>

也许你想要的东西，像htis链接： - CSS Transition hover effect for touch devices