<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS轮廓</title>
<style type="text/css">
.div1{
width:400px;
height: 40px;
}
/*outline-color 设置轮廓的颜色*/
.div1{
outline-color:blue;
}
/*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规定应该从父元素继承轮廓样式的设置。
*/
.div1{
outline-style:ridge;
}
/*outline-width 设置轮廓的宽度*/
.div1{
outline-width:1px;
}
</style>
</head>
<body>
<div class="div1">
<p>轮廓样式测试</p>
</div>
<div class="div1">
<p>轮廓样式测试</p>
</div>
</body>
</html>
轮廓样式在实际项目开发中，用的比较少
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
