html中outline属性,CSSoutline属性
1、outline(轮廓)⽤于设置元素周围的⼀条线,⽤于元素边框的外围,可起到突出元素的作⽤。
2、outline-style:值如下:
值 描述
none默认。定义⽆轮廓。
dotted定义点状的轮廓。
dashed定义虚线轮廓。
borderboxsolid定义实线轮廓。
double定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit规定应该从⽗元素继承轮廓样式的设置。
3、⽰例html>
*{
padding: 0;
margin: 0;
}
#dd{
width: 500px;
height: 300px;
/
*border: 5px solid darkcyan;*/
background: darkkhaki;
margin: 100px auto;
padding: 50px;
/*box-sizing 盒⼦尺⼨*/
box-sizing: border-box; /*不增加box-sizing新宽⾼ 不增加新的padding ,在原来的border⼤⼩⾥⾯设padding*/ }
#dd:hover{
/*border: 5px solid darkgreen;*/
outline: 5px solid darkgreen; /*outline 跟border⼀样都是写边框的,但是outline不占位置*/
}
13 outline盒⼦描边上⾯代码效果图⽚:
移⼊前
移⼊后
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论