在
之前的文章《html篇：網頁中如何實現輸入框效果（程式碼詳解）》中，跟大家介紹了怎麼使用html實現輸入框效果。以下這篇文章跟大家介紹怎麼使用CSS製作圓角按鈕效果，我們一起看看怎麼做。
html製作一個網頁中的圓角按鈕的方法
1、新建一個html文件，首先body中先輸入一個a標籤，並插入一個空連結。 <a href="#"></a>按鈕，然後在title中插入引入內嵌樣式的程式碼< ;style type="text/css">。
程式碼範例
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<style type="text/css">
</style>
</head>
<body>
<a href="#">按钮</a>
</body>
</html>程式碼效果
2、將a標籤加入一個css樣式，命名為【btn-style】，並定義按鈕的寬、高、背景色、字體顏色、去掉底線。新增disply:block，不然定義按鈕的寬高都不會生效。然後在a標籤中引入btn-style樣式。
程式碼範例
<style type="text/css">
.btn-style{
width: 150px;
height: 50px;
color: #f8ff00;
background:#010dfb;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<a href="#">按钮</a>
</body>程式碼效果
3、繼續新增樣式，給按鈕定義字體水平居中、垂直居中、字體、字體大小。
程式碼範例
line-height: 50px; text-align: center; font-size:"微软雅黑"；
程式碼效果
#4、把按鈕的四個角設置成圓角，看起來更像按鈕。
border-radius: 100px;
程式碼效果
#效果完成，還可以吧。
大家以為border-radius只是圓角嗎？其實不是指的是邊框所在圓的半徑，透過跟大家解釋border-radius屬性參數詳解。
屬性值得單位可以使用：em、px、百分比等
可以試試看，把border-radius: 100px變成10px
border-radius: 10px
程式碼效果
元素的每個圓角的"水平半徑"和"垂直半徑"都設定為10px。
border-radius可以同時設定1到4個值，如果設定四個值對應左上角、右上角、右下角、左下角。
border-radius: 10px 20px 0px 30px;
程式碼效果
推薦學習：Html影片教學
以上是手把手教你用css製作圓角按鈕效果（程式碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
rtl在css是什么意思Apr 24, 2022 am 11:07 AM在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。
css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。
怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SublimeText3 Linux新版
SublimeText3 Linux最新版
