CSS3中的outline

时间：2018-10-05 14:58:03 阅读：431 评论：0 收藏：0 [点我收藏+]

CSS3 外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。
-outline- color：定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，省略时此参数的默认值为黑色。
-outline- style：定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，省略时此参数的默认值为 none，省略后不对该轮廓线进行任何绘制。
-outline- width：定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，省略时此参数的默认值为 medium，表示绘制中等宽度的轮廓线。
-outline- offset：定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。
-inherit：元素继承父元素的 outline效果。
轮廓和边框的对比
http:/ /www.iis7.com/b/wzjk/
outline和border的对比outline属性创建的外轮廓线外表上和border极其相似，但实际上有明显的不同。
-border属于盒模型的一部分，直接影响元素盒子的大小，而outline创建的外轮廓线是画在一个框的“上面”，不会影响该框或任何其他框大小，因此outline 创建的轮廓线不会影响文档流，也不会破坏网页布局。
-outline创建的轮廓线表面上和border一样，可以创建轮廓线的颜色、线型样式、线型粗细大小，但和border有一点完全不一样。outline创建的外轮廓线在元素各边都一样，这和border不一样，不能像border边框一样，设置outline-top或outline-left之类。
-border创建的元素边框可以单边设置，而outline创建的外轮廓线始终是闭合的。
-outline创建的外轮廓线可能是非矩形的，如果元素是多行，外轮廓线就至少是能够包含该元素所有框的外轮廓。可border不一样，他将使用一个边框包括整个元素。
-border仅可以设置元素的边框，只能向外扩展，而outline创建的外轮廓线，可以通过outline-offset的值，向元素外部（outline-offset值为正值）或向元素内部（outline- offset）值为负值创建封闭的轮廓。

CSS3中的outline

标签：使用模型一点 .com outline 创建 line 设置数值

原文地址：http://blog.51cto.com/13941970/2293906

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行