Outline CSS动画在Safari上不起作用

是因为Safari浏览器对于outline属性的动画支持存在一些限制。outline属性用于设置元素的轮廓线，包括颜色、宽度和样式。然而，在Safari浏览器中，outline属性的动画效果可能无法正常显示。

解决这个问题的方法之一是使用其他属性来替代outline属性，例如box-shadow属性。box-shadow属性可以实现类似于outline的效果，并且在Safari上能够正常工作。你可以通过设置元素的box-shadow属性来创建一个类似于outline的动画效果。

另外，你还可以考虑使用JavaScript或CSS动画库来实现动画效果。这些库通常提供了更多的动画选项和兼容性，可以解决在不同浏览器上的兼容性问题。一些常用的CSS动画库包括Animate.css和GreenSock Animation Platform (GSAP)。

总结起来，如果你在Safari浏览器上遇到了Outline CSS动画不起作用的问题，可以尝试以下解决方案：

使用box-shadow属性替代outline属性来实现类似的动画效果。
考虑使用JavaScript或CSS动画库来实现动画效果，例如Animate.css或GSAP。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cmysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc

相关·内容

又一个布局利器， CSS 伪类 :placeholder-shown

-我们设置 color: green，但没有作用用。这是因为:placeholder-shown仅会针对input本身。对于实际的占位符文本，必须使用伪元素::placeholder。...这里看似empty起作用了，因为我们看到的是粉红色边框，但这实际上不起作用? 之所以显示粉红色，是因为伪类增加了 css 的权重。...pass empty string --> //css input:placeholder-shown { border-color: pink; } ?...border: 1px solid green; } 实战用placeholder-shown我们可以实现下面动效 ?....input{ position: relative; } .input-fill{ border: 1px solid #ececec; outline: none; padding

1.9K2 0

哪些你知道或不知道的css，在这里或许都齐全

如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。..., outline-width 和 outline-color;轮廓不占据空间，它们被描绘于内容之上 outline-offset: 一个元素边缘或边框之间的间隙; 试一试 4....缓动效果给过渡和动画加上缓动效果是一种流行的表现手法，可以让界面显得更加生动和真实，但是在现实世界中，物体从a到b点的移动往往不是完全匀速的，因此我们需要对动画效果加以调整，使得更加逼真解决方案：...动画在每一动画周期中执行的节奏。...解决方案：:checked伪类，这个伪类只有在复选框被勾选时才会匹配，不论是由用户交互触发，还是有脚本触发当元素与复选框关联之后，可以起到触发开关的作用 label 不是复选框那样的替换元素

1.4K2 0

哪些你知道或不知道的css，在这里或许都齐全 css编码技巧 css小技巧

如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。 ?...outline: 是用来设置一个或多个单独的轮廓属性的简写属性，例如 outline-style, outline-width 和 outline-color;轮廓不占据空间，它们被描绘于内容之上...缓动效果给过渡和动画加上缓动效果是一种流行的表现手法，可以让界面显得更加生动和真实，但是在现实世界中，物体从a到b点的移动往往不是完全匀速的，因此我们需要对动画效果加以调整，使得更加逼真解决方案：...动画在每一动画周期中执行的节奏。...解决方案：:checked伪类，这个伪类只有在复选框被勾选时才会匹配，不论是由用户交互触发，还是有脚本触发当元素与复选框关联之后，可以起到触发开关的作用 label 不是复选框那样的替换元素

1.6K1 0

Angular2 之 Animations

W3C维护着一个“可动”属性列表。...as color outline-width as length padding-bottom as length padding-left as length padding-right as length...缓动函数缓动函数用于控制动画在运行期间如何加速和减速。比如：使用ease-in。 ·函数意味着动画开始时相对缓慢，然后在进行中逐步加速。...类似于CSS3中的动画。...-动画)[http://www.w3school.com.cn/css3/css3_animation.asp]

1.9K1 0

CSS3 - 说说 CSS 上的第一个变量 currentColor, 及扯扯 inherit

介绍 currentColor – 这货说是CSS3的一个特性，但是用变量来说会更好理解；兼容性[IE9+ 及主流的FF,chrome ]。...但是IE10及edge有一些BUG（用于渐变的时候会不生效） Safari and iOS Safari 8 之前，作用于部分伪元素也不生效，比如:before 和:after currentColor...拿的是文本的color的值，也就是可以理解为 currentColor = color currentColor可以作用于常见到的色彩作用域（border,box-shadow,outline-color...继承父类的颜色及阴影设置 */ color: inherit; background: #01E498; display: block; outline...体现，，CSS-NEXT看过一些，还是只有一些小改动

1291 0

Normalize.css ——CSS Reset的友好替代品

最近才第一次接触这个Normalize.css，之前Jeff 都是采用CSS Reset的，但如今发现现在流行这个Normalize.css 了。...Normalize.css 简介官方网站：http://necolas.github.io/normalize.css/ 浏览器支持情况：Chrome, Firefox, Opera, Safari...——来源：知乎个人感觉是HTML5、CSS3 时代的CSS Reset。...([controls]) { display: none; height: 0; } /* * 校正IE 8/9中‘hidden’属性不起作用的问题...*/ a:active, a:hover { outline: 0; } /* ===========================

2.1K9 0

Vite 项目中如何去集成 Sass

add sass-loader -D 样式方面我们首先是会想到要给项目进行默认样式的重置，此时我们应当去使用一个比较稳定的npm 包的样式重置代码：找到对应的源码复制一份： /** * Modern CSS...don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; } /** * CSS...Reset Tweaks * * http://meyerweb.com/eric/tools/css/reset/ * v2.0-modified | 20110126 * License:...Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */...outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS.

1040 0

CSS3的过渡效果

CSS3现在已经添加到了Webkit中，现在 Apple Safari 和 Google Chrome 都已经开始支持。...于是过渡的样式终于开始写入CSS3的官方文档中。废话少说，进入正题。本文的例子需要支持CSS3的浏览器，所以你最好使用 Safari 或者 Chrome 来测试。...看到这个图，大家对于这几个参数的作用应该了解了吧。很简单的几个参数设置，实现了我们之前需要用大量js脚本实现的效果，那么有什么理由不期待CSS3的到来呢。...max-width Length, percentage min-height Length, percentage min-width Length, percentage opacity Number outline-color...Color outline-offset Integer outline-width Length padding-bottom Length padding-left Length padding-right

1.1K3 0

【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css )

; 二、移动端网页 CSS 初始化 - normalize.css ---- 移动端网页的 CSS 初始化 , 一般使用 normalize.css 样式文件 , 该初始化文件有以下优点 : 对有价值的默认值进行了初始化...; 修复浏览器的相关 BUG ; 实现了模块化 ; 提供了详细的文档 ; 下载地址 : https://necolas.github.io/normalize.css/ normalize.css...normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ============...Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */...outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */

9221 0

【CSS】：normalize.css

1. normalize.css 是什么？...Browser support Chrome Edge Firefox ESR+ Internet Explorer 10+ Safari 8+ Opera 3. normalize.css vs reset.css..., [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline...Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */...outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */

1.8K1 0

【CSS】714- 你所不知道的 CSS 负值技巧与细节

修改 outline-offset 到一个合适的负值，那么在恰当的时候，outline 边框就会向内缩进为一个加号。...outline 边框本身的宽度不能太小 outline-offset 负值 x 的取值范围为:-(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度...) ---- 在这个例子后，我又想，CSS 属性可以取负值的地方有很多。...所以，动画在一开始的时刻就是下面这样： ? 以上述动画为例，一个被定义执行 3s 的动画，如果 animation-delay 为 -1s，起点相当于正常执行时，第2s（3-1）时的位置。...大会上分享的，利用负的 opacity 在 CSS 中实现了伪条件判断，配合 CSS 自定义属性，使用纯 CSS 实现 360° 的饼图效果：第五届CSS大会主题分享之CSS创意与视觉表现最后额

6271 0

当CSS遇上表单控件

padding: 0.8rem 0.6rem; color: #f26135; font-size: 12px; background-color: transparent; outline...mac-chrome&safari Chrome下disabled文本颜色没有差异（Firefox下也没有差异），Safari下似乎有肉眼不可见的差异（放大n倍后能发现取色差异）。...去掉文本框默认样式： input, textarea { -webkit-appearance: none; -moz-appearance: none; outline: none;.../* remove highlight outline on samsung */ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);...-webkit-user-modify: read-write-plaintext-only; } P.S.三星GT-S7562i（android4.0.4）下输入框获得焦点时，高亮黄框去不掉，不是outline

8923 0

一篇文章带你了解CSS基础知识和基本用法

，需要注意的是，Css相当于Html的一个美化装置，所以它必须依赖于Html才能发挥作用，那么今天我们就来深入了解下它吧。...一、Css的用法 1.如何使用Css 要想使用Css来增加Html的美观，有三种方式： 1).头部文件中定义标签的Css属性 2).导入Css文件 #创建一个...1)).设置轮廓颜色 div { outline-color:red } 2)).设置轮廓样式 div { outline-style:dotted } 和边框的风格是一样的 3))....设置轮廓宽度 div { outline-width:1px } 8).框模型Border Model ?...3)).对轮廓进行偏移outline-offset div { outline-offset:15px 轮廓与边框边缘的距离 } 21.元素是否可见Visibility div{ visibility

11.1K2 0

JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

概述你肯定知道，动画在创建引人注目的 Web 应用程序中扮演着重要的角色。...关键帧用于指示浏览器 CSS 属性在给定时间点上应有的 CSS 属性，然后填充空白。...animation-duration: 2300ms; /* 动画的运行次数 */ animation-iteration-count: infinite; /* 设置对象动画在循环中是否反向运动的方法...CSS 动画在某种程度仍然需要加浏览器前缀的，在 Safari、Safari Mobile 和 Android 中都使用了 -webkit。...随着时间增加，值等比增加，使用 linear 动效，会让动画不自然，一般来说，避免使用 linear 动效。

3.4K2 0

你所不知道的 CSS 负值技巧与细节

修改 outline-offset 到一个合适的负值，那么在恰当的时候，outline 边框就会向内缩进为一个加号。...：容器得是个正方形 outline 边框本身的宽度不能太小 outline-offset 负值 x 的取值范围为: -(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半...+ outline宽度) ---- 在这个例子后，我又想，CSS 属性可以取负值的地方有很多。...下文就再介绍一些 CSS 负值有意思的使用场景。单侧投影先说单侧投影，关于 box-shadow，大部分时候，我们使用它都是用来生成一个两侧的投影，或者一个四侧的投影。如下： ?...所以，动画在一开始的时刻就是下面这样： ? 以上述动画为例，一个被定义执行 3s 的动画，如果 animation-delay 为 -1s，起点相当于正常执行时，第2s（3-1）时的位置。

5391 0

【一起来烧脑】一步学会CSS3体系

标题图 CSS3 完全向后兼容选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面 ? CSS3.png ?...: width 2s; /* Opera */} CSS3 动画 @keyframes规则多列 column-count属性规定元素应该被分隔成几列。...image.png CSS3 用户界面 div { resize:both; overflow:auto; } box-sizing 属性允许以确定的方式定义适应某个区域的具体内容。...margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline...:2px solid pink; outline-offset:15px; } ?

7032 0

记录一些小技巧-CSS篇

border-bottom: 1px solid #ddd; } 阻止元素成为鼠标事件的target pointer-events 指定鼠标如何与元素进行交互，设置为none，阻止任何鼠标事件对其的作用...想要实现加号需要符合以下几点： 1.容器是个正方形 2.outline 边框的尺寸不能太小 3.outline-offset 的取值范围: -(容器宽度的一半 + outline宽度的一半) < x...outline: 50px solid #333; outline-offset: -99px; } mask属性 ?...除了IE不支持外，谷歌、火狐、Edge、Safari、Opera等主流的浏览器都支持该属性。...currentColor不是一个css属性，而是color的属性值，currentColor 返回当前元素继承的文字颜色。

8602 0

深入浅出 CSS 动画

animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。...缓动函数在动画中非常重要，它定义了动画在每一动画周期中执行的节奏。...在 CSS 中，支持一些缓动函数关键字。...background: #333; } 表现如下：那么，加入 animation 之后，在不同的 animation-iteration-count 和 animation-direction 作用下...colorGreen 2s infinite; } @keyframes colorGreen { 0%, 100% { color: green; } } 在 Safari

1.8K4 0

移动端页面开发遇到的一些问题

-- ios7.0版本以后，safari上已看不到效果 --> 6、将网站添加到主屏幕快速启动方式，仅针对 ios 的 safari 顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style...button,input, textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline...border-box; -o-box-sizing: border-box; box-sizing: border-box; } /* 强制换行 */ .toWrap{ /* 只对英文起作用...*/ word-break: break-all; /* 只对英文起作用，以单词作为换行依据。*/ word-wrap: break-word; /* 只对中文起作用，强制换行。...{ display: -moz-box; -moz-box-direction: reverse; } /* Safari、Opera 以及 Chrome */ .css { display

7422 0

你未必知道的49个CSS知识点

鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。...position:sticky，粘性定位要起作用，需要设置最后滞留位置。chrome有bug，firefox完美 ? 11.【相邻兄弟选择器】?相邻兄弟选择器之常用场景 ? 12.【模态框】?...【outline使用】?可以使用outline来描边，不占地方，它甚至可以在里面 ? 27【背景定位】?当固定背景不随元素滚动时，背景定位是相对于视口的 ? 28【tab-size】?...CSS可以设置动画开始前和结束时所保持的状态 ? 44【动画负延迟】?CSS动画可以设置延迟时间为负数，表示动画仿佛开始前就已经运行过了那么长时间 ? 45【过渡】?爱的魔力转圈圈 ?...CSS弹球动画效果的原理 ? 48【outline】?outline属性的妙用 ? 49【grid】?火狐浏览器grid布局检测器 ? 希望有所帮助。

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云