資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時裝研究
法律研究CSS 中顏色屬性對邊框和輪廓的影響
我們可以為某個元素定義邊框顏色和輪廓顏色。輪廓與邊框不同，不會佔用任何空間。border-color 屬性用於設定元素的邊框顏色，而 outline-color 屬性用於設定其輪廓顏色。
語法
CSS border-color 和 outline-color 屬性的語法如下 −
/*for setting border-color*/
Selector {
border-color: /*value*/
}
/*for setting outline-color*/
Selector {
outline-color: /*value*/
}
以下示例說明了 CSS border-color 和 outline-color 屬性 −
設定 Span 和 div 的輪廓和邊框
在此示例中，我們設定了 Span 和 div 的輪廓和邊框 −
<div> <span></span> </div>
設定 <div> 的輪廓和邊框 −
div {
margin: auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline-style: dotted;
outline-color: black;
height: 80px;
width: 80px;
}
設定 <div> 內 <span> 的輪廓和邊框 −
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: limegreen crimson;
position: absolute;
outline-width: 5px;
outline-style: ridge;
outline-color: orange;
top: 15px;
border-radius: 50%;
}
示例
現在我們來看一下示例 −
<!DOCTYPE html>
<html>
<head>
<style>
span {
margin: 15px;
padding: 20px;
border-style: solid;
border-color: limegreen crimson;
position: absolute;
outline-width: 5px;
outline-style: ridge;
outline-color: orange;
top: 15px;
border-radius: 50%;
}
div {
margin: auto;
border-style: solid;
border-color: darkmagenta dodgerblue;
outline-style: dotted;
outline-color: black;
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
設定段落的輪廓和邊框樣式
我們在這裡使用 <p> 標籤設定了一個段落 −
<p>Entrance Exam timings 3PM - 5PM. All candidates are requested to report at 2:45PM.</p>
我們對它進行樣式設定，並設定邊框寬度、樣式、顏色，以及輪廓樣式和顏色 −
p {
border-width: 5px;
border-style: ridge;
border-color: lightblue;
outline-style: solid;
outline-color: darkviolet;
}
示例
現在我們來看一下示例 −
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-width: 5px;
border-style: ridge;
border-color: lightblue;
outline-style: solid;
outline-color: darkviolet;
}
</style>
</head>
<body>
<h2>Exams Timings</h2>
<p>Entrance Exam timings 3PM - 5PM. All candidates are requested to report at 2:45PM.</p>
</body>
</html>
更新日期：2023-01-11
295 次瀏覽
廣告