Rumah > Artikel > hujung hadapan web > css3中关于outline如何为div元素添加轮廓线的实例

css3中关于outline如何为div元素添加轮廓线的实例

黄舟asal: 2017-07-27 09:18:352214semak imbas

css3 outline为div元素添加轮廓线

有时为了样式的更加美观，可适当的为div添加轮廓线。可通过outline属性来实现。

outline 包含以下几个属性值；

outline-width:轮廓线的粗细。

此属性值包含4个参数：thin，medium,thick,length

thin:定义细轮廓；

medium:定义中型轮廓；

thick:定义粗型轮廓。

length:可以指定轮廓线的粗细，注，此值不能为负值；

outline-style：轮廓线的样式。

此属性常用参数：

none:设置为none时，轮廓将不显示.

dotted:点轮廓线,

dashed:虚线轮廓线,

solid:实线轮廓线。

outline-color:轮廓线的颜色

此属性的参数：

颜色名称:(red);

rgb颜色值:rgb(255,255,255);

十六进制颜色值:如：#ff0000;

outline-offset:轮廓线与容器的偏移值。此值为负时，将向容器内显示轮廓线。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=&#39;utf-8&#39; />
<title>无标题文档</title>
<style>
.aixuexi{
padding:20px;
position:fixed;
top:100px;
left:300px;
border:2px dashed #000;
width:100px;
height:100px;
line-height:100px;
background:#abcdef;
outline-width:10px;
outline-style:solid; 
outline-color:#99FF00;
outline-offset:20px;
}
</style>
</head>
<body>
<div class="aixuexi"><a href="#">hello world</a></div>
</body>
</html>

Atas ialah kandungan terperinci css3中关于outline如何为div元素添加轮廓线的实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：CSS中Outlines轮廓的具体分析Artikel seterusnya：css中关于outline与border的区别分析

Artikel berkaitan

Lihat lagi