outline-offset属性怎么用

css3outline-offset属性用于对轮廓进行偏移,并在边框边缘进行绘制;可以通过length值设置轮廓与边框边缘的距离。

outline-offset属性怎么用

CSS3  outline-offset属性

作用:对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

说明:轮廓与边框有两点不同:轮廓不占用空间,轮廓可能是非矩形的。

语法:

outline-offset: length|inherit;

length:轮廓与边框边缘的距离。

inherit:规定应从父元素继承 outline-offset 属性的值。

CSS3  outline-offset属性的使用示例

 div{margin:20px;width:150px; padding:10px;height:70px;border:2px solid black;outline:2px solid red;outline-offset:15px;} 

注释:Internet Explorer 和 Opera 不支持 support outline-offset 属性。

这个 div 在边框边缘之外 15 像素处有一个轮廓。

效果图:

1.jpg

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注创想鸟相关教程栏目!!!

以上就是outline-offset属性怎么用的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1614093.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:03:54
下一篇 2025年12月24日 04:04:01

相关推荐

  • box-sizing属性怎么用

    box-sizing属性允许以特定的方式定义匹配某个区域的特定元素,该属性的使用语法是“box-sizing: content-box|border-box|inherit;”。 本文操作环境:windows7系统、CSS3版、Dell G3电脑。 CSS3  box-sizing属性 作用:允许您…

    好文分享 2025年12月24日
    000
  • css3 animation属性怎么用

    css3 animation属性是一个简写属性,通过设置六个动画属性来实现动画效果。这六个属性分别为动画名称、动画时间、速度曲线、动画延迟、播放次数及动画是否反向播放。 css3 animation属性 作用:animation 属性是一个简写属性,用于设置六个动画属性。 语法: animation…

    2025年12月24日
    000
  • CSS3中的animation-name属性怎么用

    CSS3中的animation-name属性的用法:【animation-name: keyframename|none】。该属性用来给@keyframes动画规定名称。 css3 animation-name属性 作用:animation-name 属性为 @keyframes 动画规定名称。 语…

    2025年12月24日
    000
  • animation-duration属性有什么用

    animation-duration 属性是用来定义动画完成一个周期所需要的时间,以秒或毫秒计;当值为0是,表示无动画效果。 CSS3  animation-duration属性 作用:animation-duration 属性定义动画完成一个周期所需要的时间,以秒或毫秒计。 语法: animati…

    2025年12月24日
    000
  • animation-timing-function属性有什么用

    animation-timing-function属性是用来设置动画的速度曲线,它可以设置动画速度为匀速、以低速开始、以低速结束、以低速开始和结束、先慢后快再变慢或者是自己自定义数值。 CSS3  animation-timing-function属性 作用: animation-timing-fu…

    2025年12月24日
    000
  • animation-delay属性怎么用

    animation-delay属性是用来定义动画何时开始,以秒或毫秒为单位;使用animation-delay属性可以自定义动画的延迟效果。 CSS3  animation-delay属性 作用:animation-delay 属性定义动画何时开始。animation-delay 值以秒或毫秒计。 …

    2025年12月24日
    000
  • animation-iteration-count属性怎么用

    animation-iteration-count属性是用于定义动画播放次数的,设置animation-iteration-count属性的值为infinite,就可实现动画的无限循环播放。 CSS3 animation-iteration-count属性 作用:animation-iteratio…

    2025年12月24日
    000
  • animation-direction属性怎么用

    animation-direction属性是用来定义是否应该轮流反向播放动画的;当动画播放次数超过一次时,我们就可以通过设置animation-direction的值为alternate来实现动画轮流反向播放。 CSS3  animation-direction属性 作用:定义是否应该轮流反向播放动…

    2025年12月24日
    000
  • animation-play-state属性怎么用

    animation-play-state属性是用于指定动画是否正在运行或已暂停;可以通过和javascript一起使用,实现在播放过程中暂停动画的效果。 CSS3  animation-play-state属性 作用:animation-play-state 属性规定动画正在运行还是暂停。 语法: …

    2025年12月24日
    000
  • animation-fill-mode属性怎么用

    animation-fill-mode属性是用于当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式,即其动画效果是否可见。 CSS3  animation-fill-mode属性 作用:animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是…

    2025年12月24日
    000
  • 纯CSS3实现3D翻转效果的代码示例

    本篇文章给大家带来的内容是关于纯CSS3实现3D翻转效果的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 作为前端开发人员的必修课,CSS3能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其添加transit…

    2025年12月24日 好文分享
    000
  • CSS三栏布局的实现方法总结(代码示例)

    本篇文章给大家带来的内容是关于css三栏布局的实现方法总结(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 对于前端来说,布局也是必须掌握的,一个好的布局可以让页面看起来更美观。提到布局,那就不得不说CSS三栏布局。这是前端面试经常会问到的一个问题,算是基础题。所谓的三栏…

    好文分享 2025年12月24日
    000
  • border-radius属性如何使用

    border-radius属性用于创建圆角,其使用语法是“border-radius: 1-4 length|%;”,border-radius是一个最多可指定四个“border -*- radius”属性的复合属性。 本文操作环境:Windows7系统、Dell G3电脑、HTML5&&a…

    2025年12月24日
    000
  • box-shadow属性的功能是什么

    box-shadow是css3中的一个属性,是用于向方框添加一个或多个阴影,并设置阴影位置、尺寸、颜色等。 CSS3 box-shadow属性 作用:box-shadow 用于向方框添加阴影 基本语法: box-shadow: h-shadow v-shadow blur spread color …

    2025年12月24日
    000
  • border-image属性怎么用

    border-image属性是一个是一个简写属性,通过此属性可使用图片来创建边框,该属性的使用语法是“border-image: source slice width outset repeat|initial|inherit;”。 本文操作环境:windows7系统、CSS3版、Dell G3电脑…

    2025年12月24日
    000
  • background-size属性怎么用

    background-size属性是用来设置背景图片尺寸大小的,可以通过长度值或百分比来设置图片大小,或者通过cover和contain来对图片进行伸缩设置。 CSS background-size属性 作用:规定背景图片的尺寸。 说明:在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在…

    2025年12月24日
    000
  • background-origin属性怎么用

    background-origin属性是用于设置背景图片的定位区域,它有三个值分别表示相对于内边距框定位、相对于边框盒定位、相对于内容框定位。 CSS3 background-origin属性 作用:规定背景图片的定位区域。 说明:设置或检索对象的背景图像计算 时的参考原点(位置)。 语法: bac…

    2025年12月24日
    000
  • CSS中伪类和伪元素的详细介绍(代码示例)

    本篇文章给大家带来的内容是关于CSS中伪类和伪元素的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、伪类 伪类包含两种:状态伪类(UI 伪类)和结构性伪类。 (1)状态伪类是基于元素当前状态进行选择的。 在与用户的交互过程中元素的状态是动态变化的,因此该元素…

    好文分享 2025年12月24日
    000
  • CSS实现页面底部固定的方法介绍(附代码)

    本篇文章给大家带来的内容是关于css实现页面底部固定的方法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 当我们在写页面时经常会遇到页面内容少的时候,footer会戳在页面中间或什么?反正就是不在最底部显示,反正就是很难看,下面要讲的布局就是解决如何使元素粘住浏览器底…

    好文分享 2025年12月24日
    000
  • css权重是什么?css权重的介绍

    本篇文章给大家带来的内容是关于css权重是什么?css权重的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、什么是css权重?css6大基础选择器 css权重指的是css6大基础选择符的优先级,优先级高的css样式会覆盖优先级底的css样式,优先级越高说明权重越高,反之亦然…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信