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
原创wx5b83bfb2a52d1 ©著作权
©著作权归作者所有:来自51CTO博客作者wx5b83bfb2a52d1的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:CSS3中resize
下一篇:CSS3弹性模型
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 弹跳的圆
用css写一个好玩的不停弹跳变形的圆。
css 弹跳的圆 动效 动画 交互 -
有趣的CSS - 旋转的金币
今天分享的是一个旋转的金币,适用于游戏网站,会员币等场景。
css 旋转的金币 动效 ux 用户体验 -
有趣的CSS - 加载的圆
由4个圆组成的一个小清新的动态加载动画效果。
css 加载动画 loading 圆点加载 ux -
CSS3中的resize,outline
主要值有如下: 这个属性可以用于overflow属性的任何容器元素。
CSS3中的resize属性 css -
CSS3过渡效果(CSS3)
CSS3过渡效果(CSS3)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">\
css css3 html5 html 过渡效果