浅谈轮廓属性outline(1) — outline的属性介绍

浏览: 380次 日期:2018年01月28日 22:20:44 作者:青格勒

浅谈轮廓属性outline(1) — outline属性介绍

浅谈轮廓属性outline(2) — outline一般使用

浅谈轮廓属性outline(3) — outline使用技巧

 

css outline我们平常使用都比较少,这个属性虽然跟border很大程度上看起来一样,但是其属性值还是有一定的区别的。

outline所有浏览器都支持。

border是实体的,是占位置的。

outline是虚体,不占位的。

 

本章就简单的介绍下outline的属性,下篇开始说一下使用方面的。

outline有以下几个属性

1、outline-width 轮廓宽度

2、outline-color 轮廓颜色

3、outline-style轮廓样式

4、inherit 父元素继承outline设置

 

一、outline-width 轮廓宽度

thin 细轮廓

medium 中等轮廓(默认)

thick 粗轮廓

length 自定义轮廓(数字带单位)

 

二、outline-color 轮廓颜色

color_name 颜色值为颜色名称(比如 red、bule)

hex_number 颜色值为十六进制值(比如 #000、#456)

rgb_number 颜色值为 rgb 代码(比如 rgb(0,66,87))

invert 颜色反转(逆向颜色)。不同的背景颜色中可见

 

三、outline-style 轮廓样式

none 无轮廓(默认)

dotted 点状轮廓

dashed 虚线轮廓

solid 实线轮廓

double 双线轮廓

groove 3D凹槽轮廓

ridge 3D凸槽轮廓

inset 3D凹边轮廓

outset 3D凸边轮廓

 

四、inherit继承

父元素继承outline设置

 

outline可以缩写为:
outline:outline-color outline-style outline-width;

 

 

文章链接:http://cenggel.com/htmlcss/59.html

版权声明:文章《浅谈轮廓属性outline(1) — outline的属性介绍》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注