CSS outline 属性
1、outline(轮廓)用于设置元素周围的一条线，用于元素边框的外围，可起到突出元素的作用。
2、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 规定应该从父元素继承轮廓样式的设置。
3、示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ 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不占位置*/ } </style> </head> <body> <div id="dd"> <h1>13 outline盒子描边</h1> </div> </body> </html> 上面代码效果图片：
移入前
移入后
原文链接：https://www.qiquanji.com/post/7634.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知