css怎麼實現按鈕圓角樣式的展示效果?(樣本)

來源:互聯網
上載者:User
在網頁設計過程中,一般標籤屬性預設的效果都不是太美觀,就比如按鈕樣式,預設狀態是極其普通毫無美感。那麼本篇文章就給大家介紹關於css設定按鈕樣式之圓角按鈕效果的相關操作樣本。

代碼如下:

<div style="width:100px;height:50px;background-color:red;border-radius:15px;">

或者

<input type="button" value=" " style="border-radius:5px;" />

效果如:

看了上述代碼是不是覺得非常簡單呢。其實html設定圓角矩形按鈕樣式關鍵之處,就是css中的border-radius
屬性。只要你掌握了這屬性的本質用法,那麼無論給div還是圖片還是邊框按鈕設定圓角都可以輕鬆實現。

重點知識點介紹:border-radius 屬性是一個最多可指定四個 border -*- radius 屬性的複合屬性 這個屬性允許你為元素添加圓角邊框!

border-radius: 1-4 length|% / 1-4 length|%;

每個半徑的四個值的順序是:左上方,右上方,右下角,左下角。如果省略左下角,右上方是相同的。如果省略右下角,左上方是相同的。如果省略右上方,左上方是相同的。

那麼本篇關於css按鈕設定圓角樣式的介紹,對有需要的朋友有所協助。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.