溫馨提示×

css3如何寫橫向漸變按鈕

養魚的貓咪
953
2021-03-25 15:12:04
欄目: 編程語言

在css3中設置按鈕橫向漸變的方法:1.創建按鈕;2.設置按鈕寬高;3.使用background的-webkit-linear-gradient屬性設置橫向漸變;

css3如何寫橫向漸變按鈕

在css3中設置按鈕橫向漸變的方法

1.首先,在頁面中創建一個按鈕;

 <body>

   <button type="button" class="colour">漸變按鈕</button>

 </body>

2.按鈕創建好后,在css中設置按鈕的寬度和高度;

button{

  width:150px;

  height:70px;

}

3.按鈕的寬高設置好后,使用background中的-webkit-linear-gradient屬性即可設置按鈕橫向漸變;

 button {

   width: 150px;

   height: 70px;

   background:-webkit-linear-gradient(left,red,pink,#fff);

}

效果:

css3如何寫橫向漸變按鈕

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女