資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 CSS 為影像新增邊框？
要為影像新增邊框，請使用border屬性並將其設定為<img>元素。這是設定邊框樣式、寬度、顏色等的簡寫屬性。邊框樣式可以是實線、雙線、點狀線等。
為影像新增邊框
以下是使用 CSS 為影像新增邊框的程式碼。我們在 img 元素中設定了邊框：
img {
border: 8px solid rgb(0, 238, 255);
width: 400px;
height: 400px;
}
示例
讓我們來看一個為影像新增邊框的示例：
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 8px solid rgb(0, 238, 255);
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<img src="https://tutorialspoint.tw/scala/images/scala-mini-logo.jpg">
</body>
</html>
為影像邊框新增樣式
如果要設定邊框，需要為影像邊框新增樣式。邊框有多種樣式：
點狀線 (Dotted) - 用於指定點狀邊框
虛線 (Dashed) - 用於指定虛線邊框
實線 (Solid) - 用於指定實線邊框
雙線 (Double) - 用於指定雙線邊框
示例
如果不設定邊框顏色，它將自動設定為黑色。讓我們來看一個為影像邊框新增樣式的示例：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: dotted;
}
p {
border: dashed;
}
img {
border: solid;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<p>Set the border...</p>
<img src="https://tutorialspoint.tw/scala/images/scala-mini-logo.jpg">
</body>
</html>
為影像邊框新增顏色
使用border屬性，我們可以輕鬆設定邊框顏色。但是，需要指定邊框樣式。讓我們來看一個為影像邊框新增顏色的示例：
示例
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: dotted red;
}
p {
border: dashed green;
}
img {
border: solid blue;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<p>Set the border...</p>
<img src="https://tutorialspoint.tw/scala/images/scala-mini-logo.jpg">
</body>
</html>
為影像邊框新增寬度
使用border屬性，我們可以輕鬆設定邊框寬度。但是，需要指定邊框樣式。讓我們來看一個為影像邊框新增寬度的示例：
示例
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 3px dotted red;
}
p {
border: 5px dashed green;
}
img {
border: 6px solid blue;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<p>Set the border...</p>
<img src="https://tutorialspoint.tw/scala/images/scala-mini-logo.jpg">
</body>
</html>
建立帶邊框的圓角影像
border-radius屬性用於建立圓角影像。要設定邊框，請使用border屬性。讓我們來看一個建立帶邊框的圓角影像的示例：
示例
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 3px dotted red;
}
p {
border: 5px dashed green;
}
img {
border: 6px solid blue;
border-radius: 30px;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<p>Create rounded border...</p>
<img src="https://tutorialspoint.tw/scala/images/scala-mini-logo.jpg">
</body>
</html>
更新於：2023年11月15日
1K+ 次瀏覽
廣告