CSS3 (outline)

原创

gaochongid 2012-05-07 16:37:49 ©著作权

文章标签 CSS3 outline 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者gaochongid的原创作品，请联系作者获取转载授权，否则将追究法律责任

CSS3 outline 边框轮廓

属性说明：

outline: [outline-width] || [outline-style] || [outline-color]

a) 画在border外面的线

b) 不允许想border那样拆分成border-top等

c) 不会修改盒子的大小

outline-offset:

a) 轮廓线与border之间的宽度

b) 不会修改盒子的大小

c) IE8暂不支持这个属性

上一篇：CSS3 (animation)

下一篇：CSS 盒模型

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

【CSS】第九讲：CSS基本选择器（1）

本文讲了部分CSS选择器

选择器属性值基本语法
HTML+CSS使用

一、旋转太极图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转太极

html css
前端三剑客-HTML，CSS，JS（侧重HTML,CSS)

一、什么是HTML、CSS1.HTMLHTML（HyperText Markup Language):超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言HTML标签都是预定好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析HTML负责网页的基本结构（页面元素和内容），网页的骨架2.CSSCSS(Casca

选择器 html HTML
CSS3中的outline

CSS3外轮廓属性外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。-outline-color：定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，省略时此参数的默认值为黑色。-outline-style：定义轮廓线的样式，

CSS3 outline
css3之outline-offset

CSS3之outline-offset -------可以用来调整外框与容器边框的距离。语法： outline-offset:<length>|inherit 2. 取值：<leng认继承 3. 兼容性（部...

outline-offset Chrome css html
CSS3中的resize,outline

主要值有如下：这个属性可以用于overflow属性的任何容器元素。

CSS3中的resize属性 css
CSS3——过渡(CSS3)

不得不爱过渡(CSS3)案例过渡(CSS3)过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画：是从一个状态渐渐的过渡到另外一个状态帧动画：通过一帧一帧的画面按照固定顺序和速度播放。

CSS3 CSS html
CSS3——CSS3盒模型

像手腕上散发的香水味CSS3盒模型案例CSS3盒模型CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，

CSS3 CSS html
css3 cursor reset visibility display vertical-align overflow outline

cursor :pointer visibility:hidden ##会占用元素位置 display:none ##不会占用位置 overflow:超出元素部分隐藏 overflow-x：auto overflow-y: outline:none 文本框蓝色的边vertical-align :ba

html 块元素省略号
CSS3动画序列（CSS3）

CSS3动画序列（CSS3）<!DOCTYPE html><html lang="en"><head> <meta charset="UT\

css3 css html css3动画
CSS3过渡效果（CSS3）

CSS3过渡效果（CSS3）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">\

css css3 html5 html 过渡效果
CSS/CSS3

CSS基础《图解CSS》CSS简介《图解CSS》选择器《图解CSS》盒子模型CSS

css css3 html 前端动画
CSS3属性calc函数（CSS3）

CSS3属性calc函数（CSS3）<!DOCTYPE html><html lang="en"><head> <meta charset="\

ccs3 html css3 c函数
CSS3

css3其实现在的浏览器已经支持得很好了，并且有些属性，原来我之前已经不经意使用

css3 背景图片 css
【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

一、CSS3 动画简介二、CSS3 动画实现步骤三、动画定义四、代码示例

css3 前端 css 动画动画定义
CSS3 gpu css3 gpu加速

（一）前言在需要高频交互的css动画时候，我们就需要考虑使用CSS3 硬件加速。首先，CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能。现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，

CSS3 gpu 硬件加速 CSS 3d
-_-#【CSS3】

消除疑问：CSS动画 VS JavaScriptCSS3实现四叶草、水母与玻璃瓶令人难以置信的纯CSS3图标和LogoCSS3 2D Transform 详细讲解理解CSS3 transform中的Matrix(矩阵)Web排版的缩放

css3 javascript 缩放 2d css动画
【CSS3】

Web前端实验室http://demo.doyoe.com/::before ::afterCSS3已经将伪元素的前缀更改为双冒号，而伪类则保持为单冒号backface-visibilityhttp://ecd.tencent.com/css3/html/animation/backface-vis...

css3 html 伪元素 web前端

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯