css中使用outline-width属性的案例

　　介绍

小编给大家分享一下css中使用outline-width属性的案例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

<强> css outline-width属性定义及用法

1。在css中,outline-width属性是使用来设置轮廓的宽度,所谓轮廓就是绘制于元素周围的一条线,位于边框边缘的外围,不是元素尺寸的一部分,因此元素的宽度和高度属性不包含轮廓的宽度。轮廓与边框不同,轮廓不占用空间,轮廓可能是非矩形。

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

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

<强> css outline-width属性语法格式

css语法:outline-width:?媒介/厚度/长度/继承

JavaScript语法:object.style.outlineWidth=皌hin"

<强>属性值说明

1.薄:定义细轮廓

2.介质:定义中等的轮廓(默认)

3。厚:定义粗的轮廓

4.长度:允许您规定轮廓粗细的值

5。继承:从父元素继承outline-width属性的值

<强>实例

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=皍tf-8"/比; 　　& lt; title> css outline-width属性设置轮廓宽度& lt;/title> 　　& lt;风格类型=拔谋?css"比; 　　div{宽度:300 px;高度:60 px;边界:1 px固体# 000;margin-top: 15 px; outline-style:虚线;} 　　# div1 {outline-width:薄;}/*细轮廓*/# div2 {outline-width:厚;}/*粗轮廓*/# div3 {outline-width: 8 px;}/*自定义轮廓宽度为8 px */& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=癲iv1"祝辞thin