css outline-color属性设置轮廓颜色

原创 国哥笔记  2019-03-05 10:42  阅读 497 views 次

outline-color属性定义及用法

在css中,outline-color属性是使用来设置轮廓的颜色。所谓轮廓就是绘制于元素周围的一条线,位于边框边缘的外围,是围绕元素的边距,不是元素尺寸的一部分,因此元素的宽度和高度属性不包含轮廓的宽度。

outline-color属性必须和outline-style属性一起使用,这很好理解,元素必须要有轮廓(outline-style属性定义轮廓样式)才能设置轮廓颜色。

如果需要同时设置元素轮廓的多个属性,建议使用outline简写属性,通过outline属性可以简化代码,将轮廓的多个属性定义在一个声明中,可以设置的轮廓属性分别是(按顺序):outline-color、outline-style、outline-width

outline-color属性语法格式

  1. css语法:outline-color:color/invert/inherit;
  2. JavaScript 语法:object.style.outlineColor="#00FF00";

属性值说明

  • color:定义轮廓的颜色;
  • invert:执行颜色反转(逆向的颜色),可使轮廓在不同的背景颜色中都是可见(默认);
  • inherit:从父元素继承outline-color属性的值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css outline-color属性设置轮廓颜色</title>
<style type="text/css">
div{width:360px;height:60px;border:1px solid #000;outline-style:dotted;}
#div1{outline-color:#B8860B;}
#div2{outline-color:#00FF00}
#div3{outline-color:red;}
</style>
</head>
<body>
<div id="div1">outline-color:#B8860B;</div>
<div id="div2">outline-color:#00FF00</div>
<div id="div3">outline-color:red;</div>
</body>
</html>

运行结果:

css outline-color属性设置轮廓颜色

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-outline-color.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情