`
zhangyaochun
  • 浏览: 2620991 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css3之outline-offset

    博客分类:
  • css3
阅读更多

 

CSS3之outline-offset

 

     -------可以用来调整外框与容器边框的距离。

 

 

  1. 语法:
          outline-offset:<length>|inherit

     2.  取值:

  • <length>:定义轮廓距离容器的值
  • inherit:默认继承

     3. 兼容性  (部分教程说的是IE8是支持的,但是我没有测试出来,大家可以自己试试)

类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)IE6 (√)Firefox 3.0.10 (√)Chrome 2.0.x (√)Opera 9.64 (√)Safari 4
(×)IE7 (√)Firefox 3.5
(×)IE8


扩展阅读:

 

1
0
分享到:
评论

相关推荐

    响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例2-7 CSS3 outline-offset属性

    具体而言,我们将重点关注CSS3中的`outline-offset`属性,它在第2章“CSS3文本与图标”中的例2-7中被详细讲解。 首先,让我们理解HTML5的基础。HTML5是超文本标记语言的最新版本,增强了语义化元素,提供了更好的...

    利用CSS中的 outline-offset 属性实现加号

    假设有这么一个初始代码: &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;meta name=viewport content=width=device-width, initial-scale=1.0&gt; ...

    4.《HTML5+CSS3从入门到精通》自测练习(修正版).docx

    此外,CSS3增加了许多新的样式属性,如outline,可以通过outline-color、outline-style、outline-width和outline-offset来定义元素的轮廓。还有新的布局模式,如Flexbox和Grid,极大地改善了网页的响应式设计。 ...

    CSS3新特性1

    - `outline-offset`: 设置轮廓的偏移量 ### 13. 不兼容与前缀 需要注意的是,部分CSS3属性在旧版IE中不被支持,可能需要使用像`-moz-`、`-webkit-`这样的前缀来确保在不同浏览器中的兼容性。例如,`box-sizing`在...

    纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

    加号图标可以通过调整暂停按钮的outline-offset属性来实现,当将outline-offset的值设置得更小,会使内部正方形变得更宽,从而形成加号图标。而关闭按钮则是加号图标旋转45度的结果。CSS代码分别如下: 加号图标: ...

    CSS3实现多重边框的方法总结

    随着CSS3的兴起,一些新的属性如box-shadow和outline-offset也被应用在多重边框的实现中,这为网页设计师提供了更多的选择和便利。 首先,传统的嵌套div方法是一种兼容性极好的方式,通过在父元素div内部嵌套子元素...

    轮廓

    除了这些基本属性,`outline-offset`还可以调整轮廓与元素边框之间的距离,`outline-none`则用于清除元素的默认轮廓。 在实际应用中,轮廓经常用于提升可访问性,特别是为键盘导航的用户或者视觉障碍用户提供更好的...

    教你自定义谷歌浏览器的滚动条样式

    谷歌浏览器支持 CSS3,因此您可以使用 CSS3 的样式来自定义滚动条的样式。 在学习自定义谷歌浏览器滚动条样式的过程中,我们了解了如何使用 CSS 来改变滚动条的样式,并且学会了如何使用 Custom.css 文件来实现...

    CSS3 用户界面

    在CSS3中,用户界面(UI)的特性得到了显著增强,使得开发者能够更精确地控制网页元素的显示和交互方式。这些新特性包括调整尺寸、方框大小调整以及外形修饰等,大大提升了用户体验。 首先,让我们关注一下**resize...

    Dogo-Flex:带有CSS中轮廓的Flexbox

    4. 使用CSS选择器针对每个flex项定义`outline`属性,包括`outline-color`、`outline-style`和`outline-width`。 5. 可选地,使用`outline-offset`来调整轮廓与元素之间的距离,增强视觉效果。 在实际项目中,你可以...

    滤镜问题-FireFox火狐浏览器与IE的对比分析

    - `*-moz-outline-offset`: 设置轮廓线偏移。 - `*-moz-outline-radius`: 设置轮廓线的圆角半径。 - `*-moz-outline-radius-bottomleft`: 设置轮廓线左下角的圆角半径。 - `*-moz-outline-radius-bottomright`: ...

    CSS3.0基础知识

    `outline` 属性用于定义元素的轮廓,包括宽度、样式和颜色,以及通过 `outline-offset` 设置轮廓与边框之间的距离。 7. **多列布局**: `column-count` 和 `column-gap` 分别用于创建多列布局和设置列之间的间距;...

    网页HTML CSS 标签代码及描述大全.docx

    - `outline`:定义元素的轮廓,包括`outline-color`、`outline-style`和`outline-width`。 - `padding`:简写属性,设置元素的内边距。 - 各个`border-*`属性:分别设置边框的样式、宽度和颜色,如`border-top`、...

    CSS参考手册,学习资料,文字教程.docx

    【CSS参考手册】是关于CSS(层叠样式表)的学习资料,主要涵盖了CSS的各种属性,包括背景、边框、文本、字体、外边距、内边距、列表、内容生成和尺寸定位等多个方面。 首先,**CSS背景属性(Background)**允许你...

    CSS常用属性.docx

    【CSS常用属性】是网页设计中不可或缺的一部分,它们允许开发者精细控制网页元素的外观和布局。以下是一些关键的CSS属性及其详细说明: 1. **背景属性(Background)**: - `background-color`: 设置元素的背景...

    CSS 速查表CSS 速查表.pdf

    ### CSS 速查表知识点详解 #### 一、盒子模型(Box Model) 在网页设计中,一个元素的布局可以通过盒模型来定义。盒模型包括四个主要部分:边距(margin)、边框(border)、填充(padding)和实际内容(content)。 - **...

    单元素利用css实现多重边框效果示例代码

    `outline`在IE8及以上版本支持,但`outline-offset`在IE中不被支持。`box-shadow`则需要IE9及以上版本才能兼容。 总的来说,单元素实现多重边框有多种策略,包括`border-style: double`、`outline`和`box-shadow`。...

    CSS参考手册,学习资料,文字教程.pdf

    【CSS参考手册】是关于CSS(层叠样式表)的学习资料,主要涵盖了CSS中的关键属性,包括背景、边框、文本、字体、外边距、内边距和列表等。以下是对这些知识点的详细说明: **背景属性(Background)** 1. `...

Global site tag (gtag.js) - Google Analytics