我附上了一张图片,想知道有没有人知道如何使用CSS和HTML制作按钮?我已经尝试了边框和阴影效果,但无法正确处理角落。
我需要它们是不同颜色的(在不同的背景下),这就是为什么我会问的原因。我不介意使用不同的颜色或只使用RGBA值。按钮的颜色总是比背景稍微暗一些。
感谢您的时间!
我需要它们是不同颜色的(在不同的背景下),这就是为什么我会问的原因。我不介意使用不同的颜色或只使用RGBA值。按钮的颜色总是比背景稍微暗一些。
感谢您的时间!
实现这一效果的简单方法是应用多个box-shadow
:
a{
background: #ccc;
display: block;
box-shadow: #000 1px 1px 0,
#000 2px 2px 0,
#000 3px 3px 0,
#000 4px 4px 0,
#000 5px 5px 0,
#000 6px 6px 0,
#000 7px 7px 0,
#000 8px 8px 0;
}
另一种方法是在伪元素上使用skew
:
a{
background: #ccc;
display: block;
position: relative;
}
b::before, b::after{
content: '';
position: absolute;
top: 5px; /* half of the shadow width */
right: -10px; /* negative shadow width */
width: 10px;
height: 100%;
background: #000;
transform: skewY(45deg);
}
b::after{
height: 10px;
width: 100%;
bottom: -10px; /* negative shadow height */
left: 5px; /* half of the shadow height */
top: auto;
right: auto;
transform: skewX(45deg);
}
button {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-weight: 700;
font-size: 3em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 100px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;