今天我用 box-shadow （阴影属性）和 transition （过渡属性）
还有inset值（将外阴影转化为内阴影） ease值（慢速开始，中间变快，慢速结束）
https://www.oneplus.com/cn(请看一加官网的底部在线客服) 因为博客不能插入视频
请看HTML代码
<body>
<input type="submit" name="" value="在线客服">
<!-- 此内容是提交上去的使用input更规范 -->
</body>
css代码
input{
width: 200px;/*宽*/
height: 40px;/*高*/
background-color: transparent;/*将背景颜色设置为透明transparent*/
border:1px #000 solid;/*边框设置、1像素、黑色、实现solid*/
transition: ease 0.2s;/*过渡 设置为6s*/
-webkit-transition: ease 0.2s;/*-webkit代表safari、chrome私有属性*/
-moz-transition: ease 0.2s;/*-moz代表firefox浏览器私有属性*/
-ms-transition: ease 0.2s;/*-ms代表ie浏览器私有属性*/
}
input:hover/*鼠标悬浮*/{
-webkit- box-shadow: inset 200px 0px 0px 0px #000; /*内阴影 宽200像素 黑色*/
box-shadow: inset 200px 0px 0px 0px #000; /*内阴影 宽200像素 黑色*/
color: #fff;/*字体设置为白色*/
}
- -moz代表firefox浏览器私有属性
- -ms代表ie浏览器私有属性
- -webkit代表safari、chrome私有属性
- 这些是为了兼容老版本的写法，比较新版本的浏览器都支持直接写：border-radius。
- 现在比较流行的一个概念就是：不太关键的样式，可以不考虑兼容，比如你说的圆角，并不影响内容的显示，如果客户浏览器太旧，就让他看到旧的方形效果就是，一定要看到新效果，只能建议客户升级浏览器。