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盒子描边

上面代码效果图片：

移入前

移入后

html中outline属性,CSS outline 属性相关推荐

css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
html页面透明度属性,css透明度属性是什么？
css透明度属性是什么?CSS透明度属性是opacity属性.下面本篇文章就来给大家介绍一下CSS 透明度属性--opacity属性.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
html中outline属性,css outline属性怎么用？
CSS outline属性是一个简写属性,用于在一个声明中设置所有的轮廓属性,如颜色.样式.宽度,可在元素周围位于边框边缘的外围绘制一条线,能起到突出元素的作用. CSS outline属性作用:是 ...
css outline color,css outline-color属性怎么用
轮廓是绘制于元素周围的一条线,位于边框边缘的外围.outline-color属性用于设置一个元素整个轮廓中可见部分的颜色.需始终在outline-color属性之前声明 outline-style 属 ...
html中页面背景属性,css背景属性有哪些？
css背景属性有哪些?下面本篇文章给大家带来关于css背景属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css背景属性有哪些?background简写属性,作用是将背景 ...
css列表格式属性,css list-style-type属性笔记
list-style-type属性定义及用法在css中,list-style-type属性是使用来设置列表项标记的类型,在有序列表和无序列表中经常都会使用该属性. 目前,所有主流浏览器都支持list ...
css的fill属性,css column-fill属性怎么用
css column-gap属性定义及用法在css中,column-gap属性通常和columns.column-count等分列属性一起使用,用来设置元素内容分列(多列布局)后列与列之间的距离 c ...
java font属性,css font-family属性怎么用
原标题:css font-family属性怎么用 css font-family属性怎么用? 属性定义及使用说明 font - family属性指定一个元素的字体. font-family 可以把多个 ...
html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
html的过渡属性,CSS过渡属性 transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标划过.单击.获得焦点或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值过渡属性需要触发事件, ...

html中outline属性,CSS outline 属性

13 outline盒子描边

html中outline属性,CSS outline 属性相关推荐

最新文章

热门文章