html中outline属性,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、示例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盒子描边

上面代码效果图片:

移入前

7f1d55ddc980944c55f6a8bfcd130503.png

移入后

717badb98c26f2a6cc4bcf180fd90b66.png

  • 0
    点赞
  • 12
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值