这可以通过使用linear-gradient
来实现。
linear-gradient
代表了四个参数:
<angle>
。这是linear-gradient
的起点,因此值为0deg
等同于to top;
。增加的值顺时针旋转。color
。它指示了linear-gradient
的颜色,可以是rgb
、rgba
或hex
。<linear-color-stop>
。这表示我们linear-gradient
中颜色停止的位置(为了使其适应不同的width
,应该使用百分比而不是原始数字)。<color-hint>
。这个参数指定了相邻颜色之间渐变的方式。所以每当设置为100%
,就会出现一个硬线,在这个位置上渐变会更改(应该总是将它设置为最后一种颜色或单独指定颜色)。linear-gradient(<angel>, color <linear-color-stop> <color-hint>)
你的最终代码应该像这样:
```button {
width: 200px;
height: 50px;
border: 1px solid rgba(40, 141, 211, 1);
border-radius: 5px;
background: linear-gradient(315deg, rgba(40, 141, 211, 1) 90%, rgba(255, 214, 103, 1) 10% 100%);
}
<button></button>
使用这种干净简洁的方式:
当你需要一个倾斜的角度时,你需要在
linear-gradient
中使用角度。在你的情况下,它是在左上角,所以尝试一些不同的数字来得到你想要的效果。可以使边框变粗或细,我已经根据图片选择了颜色和边框,并调整了按钮的宽度。
注意:如果你增加按钮的宽度,倾斜角度也会变化,因此你需要为此调整代码。这对所有在这里发布答案的人都适用。
.btn {
width: 200px;
height: 50px;
background: linear-gradient(315deg, #278CD3 150px, #FFD667 90px, #FFD667 100%);
border-radius: 7px;
border: 1px solid #278CD3;
}
<button type="button" class="btn ">Button</button>
width
更改时严重破坏。 - SMAKSS.btn{
background: rgb(241,157,6);
background: linear-gradient(133deg, rgba(241,157,6,1) 20%, rgba(9,9,121,1) 20%, rgba(9,9,121,1) 100%);
color: white;
border: none;
padding: 10px 20px;
}
<button class="btn">hello</button>
给你,复制品。
.btn {
width:200px;
height:50px;
border-radius: 6px;
border: 2px solid #278CD3;
background: linear-gradient(315deg,#278CD3 150px, #FFD667 90px, #FFD667 100%);
font-size:16px;
color: #FFD667;
}
<button type="button" class="btn">Button</button>
2px
的边框吗? - Manjuboyz<button><img src="pic_trulli.jpg" width="30px" height= "30px"></button>