日度归档:2020年1月29日

CSS 轮廓(outline)属性简介说明


摘要:
下文讲述css属性outline的简介说明,如下所示:


css outline功能说明

在一个元素外部添加一个外部轮廓,此轮廓也可以设置宽度 样式 颜色,
在css代码中,我们可以通过outline属性快速设置元素的轮廓。
———————
css outline语法:
outline: outline-color outline-style outline-width inherit

css outline注意事项:
outline是不占空间的,
所以outline属性不会增加额外的width或者height


css outline举例说明

   <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
p 
{
	border:1px solid red;
	outline:red dashed 3px;
}
</style>
</head>

<body>
<p><b>此属性是css3种的一个属性:</b> </p>
</body>
</html>

css outlline轮廓属性

css outlline轮廓属性


相关阅读:
CSS outline-width属性简介说明
CSS outline-style属性简介说明
CSS outline-color属性简介说明

CSS outline-width属性简介说明


摘要:
下文讲述css中outline-width属性的简介说明,如下所示:


css outline-width属性功能说明

css outline-width功能是用于定义元素外轮廓的宽度样式。
css outline-width属性值说明:

属性值

备注
length

轮廓的粗细值
thin

细轮廓
medium

缺省值-默认值 中等轮廓
thick

细的轮廓
inherit

从父元素继承轮廓宽度。


css outline-width属性举例说明

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
p.a
{
	border:1px solid red;
	outline-style:solid;
	outline-width:thin;
}
p.b
{
	border:1px solid red;
	outline-style:dotted;
	outline-width:3px;
}
</style>
</head>
<body>

<p class="a">第一个元素轮廓</p>
<p class="b">第二个元素的轮廓</p>

 </body>
</html>

css outlline-width轮廓属性

css outlline-width轮廓属性


相关阅读:
CSS 轮廓(outline)属性简介说明

CSS outline-style属性简介说明


摘要:
下文讲述css中outline-style属性的简介说明,如下所示:


css outline-style属性功能说明

css outline-style功能是用于定义元素外轮廓的边框样式。
css outline-style属性值说明:

属性值

备注
none

缺省值,无轮廓
dotted

点状的轮廓
dashed

虚线轮廓
solid

实线轮廓
double

双线轮廓。双线的宽度等同于 outline-width 的值
groove

3D 凹槽轮廓。此效果取决于 outline-color 值
ridge

3D 凸槽轮廓。此效果取决于 outline-color 值
inset

3D 凹边轮廓。此效果取决于 outline-color 值
outset

3D 凸边轮廓。此效果取决于 outline-color 值
inherit

规定应该从父元素继承轮廓样式的设置。


css outline-style属性举例说明

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
p 
{
	border:1px solid blue;
	outline-style:ridge;
	outline-color:#00ff00;
}
</style>
</head>

<body>

<p><b>outline-style属性用法举例</b></p>
</body>
</html>

css outlline-style轮廓属性

css outlline-style轮廓属性


相关阅读:
CSS 轮廓(outline)属性简介说明