首頁 > web前端 > css教學 > css怎麼實現按鈕圓角樣式的展示效果?(範例)

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

藏色散人
發布: 2018-08-15 16:22:04
原創
13996 人瀏覽過

在網頁設計過程中,一般標籤屬性預設的效果都不是太美觀,就例如按鈕樣式,預設狀態是極為普通毫無美感。那麼本篇文章就跟大家介紹css設定按鈕樣式圓角按鈕效果的相關操作範例。

程式碼如下:

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

<input type="button" value=" " style="border-radius:5px;" />
登入後複製

效果如下圖:

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

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

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

border-radius: 1-4 length|% / 1-4 length|%;
登入後複製

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

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




#

以上是css怎麼實現按鈕圓角樣式的展示效果?(範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板