数据结构
网络
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 次浏览
广告