html怎麼設定邊框圓角
- 青灯夜游原創
- 2021-12-14 14:37:2949404瀏覽
設定方法：1、利用border-radius屬性，語法「border-radius:圓角半徑;」；2、利用border-image屬性，用圓角的圖片來建立邊框，語法“ border-image:url(圓角圖片位址) 20 fill;」。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
html設定邊框圓角
#1、利用border-radius屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 300px;
border-radius: 25px;
}
</style>
</head>
<body>
<div>border-radius 属性为元素添加圆角边框！ </div>
</body>
</html>
2、利用border-image屬性
使用一個有圓角的圖片來建立邊框
範例：
使用圖片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.border_image{
width:100px;
border:double gray 10px;
border-image:url(https://img.php.cn/upload/article/000/000/024/61b839d3982fc635.png) 20 fill;
text-align:center;
color:white;
}
</style>
</head>
<body>
<div class="border_image">1</div>
</body>
</html>
推薦教學：《html影片教學》
以上是html怎麼設定邊框圓角的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：html可以增加多個背景圖片嗎下一篇：html可以增加多個背景圖片嗎