CSS:在移动设备上查看元素时导致奇怪阴影的边框颜色命令

CSS中，移动设备上查看元素时导致奇怪阴影的边框颜色命令是-webkit-tap-highlight-color。

-webkit-tap-highlight-color是一个用于控制移动设备上触摸元素时出现的高亮颜色的CSS属性。在移动设备上，当用户点击一个可点击元素时，会出现一个默认的高亮效果，这个属性可以用来修改高亮颜色。

该属性的默认值为rgba(0, 0, 0, 0)，即完全透明的黑色。如果你在移动设备上查看元素时发现边框周围有奇怪的阴影，可能是由于默认的高亮颜色导致的。

为了避免这种情况，你可以将-webkit-tap-highlight-color属性设置为与背景颜色相同的值，或者设置为完全透明的值，以取消高亮效果。

例如，如果你的背景颜色是白色，你可以使用以下CSS代码来取消高亮效果：

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

这样就可以避免移动设备上查看元素时出现奇怪阴影的边框颜色了。

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

相关·内容

面试题整理｜45个CSS面试题

Q12、CSS盒模型所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。 CSS 框模型实质上是一个包围每个 HTML 元素的框。...设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。...使网站具有响应能力意味着某些元素将通过CSS媒体查询根据设备的屏幕尺寸（通常是视口宽度）来调整其大小或其他功能，从而做出响应。例如，在较小的设备上减小字体大小。...： 1、由于不必针对任何媒体查询验证适用于它们的所有规则，因此在移动设备上的性能更高 2、它会强制针对响应式CSS规则编写更简洁的代码。...这些元素不会影响其他元素的位置。固定 fixed 将元素从页面流中移除，并将其放置在相对于视口的指定位置，并且在滚动时不会移动。粘性sticky 粘性定位是相对定位和固定定位的混合。

4.1K3 0

移动web端常见bug

A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。...移动端如何清除输入框内阴影 Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： A:代码如下 ?...解决字体在移动端比例缩小后出现锯齿的问题 Q: 解决字体在移动端比例缩小后出现锯齿的问题 A:代码如下 ?...A:方案如下 1 设置标签的autocomplete=”off”,亲测无效可能 2 设置盒子的内阴影为你常态的颜色（下面以白色为例） ? 开启硬件加速 Q: 优化渲染性能 A:代码如下 ?...用户设置字号放大或者缩小导致页面布局错误 ? 移动端去除type为number的箭头 ?

1.8K3 0

CSS layout（布局）

padding-left 内边距的设置会影响到盒子的大小背景颜色会延伸到内边距上一个盒子的可见框的大小，由内容区内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算...，其下边的元素会向下移动左外边距，设置一个正值，元素会向右移动 margin也可以设置负值，如果是负值则元素会向相反的方向移动元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身...猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。...正值向下移动负值向上移动第三个值阴影的模糊半径第四个值阴影的颜色 2.10.3 圆角 border-radius: 用来设置圆角圆角设置的圆的半径大小 border-top-left-radius...正值向下移动负值向上移动第三个值阴影的模糊半径第四个值阴影的颜色 */ box-shadow

2.1K4 0

01-移动端开发教程-CSS3新特性

这边课程内容包括： CSS3新特性新选择器边框、背景升级、圆角、阴影新的盒模型渐变、动画、2D3D转换伸缩布局、多列布局新单位在线字体图标前缀应用、浏览器兼容、渐进增强媒体查询移动端适配开发方案...E:after、E:before在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::...不允许负值 :设置对象的阴影的颜色。请参阅颜色值 inset：设置对象的阴影类型为内阴影。...该值为空时，则对象的阴影类型为外阴影默认值：none 说明：设置或检索对象阴影。可以设定多组效果，每组参数值以逗号分隔。设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。...注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。

2.6K7 0

01-移动端开发教程-CSS3新特性（上）

这边课程内容包括： CSS3新特性新选择器边框、背景升级、圆角、阴影新的盒模型渐变、动画、2D3D转换伸缩布局、多列布局新单位在线字体图标前缀应用、浏览器兼容、渐进增强媒体查询移动端适配开发方案...E:after、E:before在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::...不允许负值 :设置对象的阴影的颜色。请参阅颜色值 inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影默认值：none 说明：设置或检索对象阴影。...设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感。...注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。

1.5K0 1

H5C3第一节

CSS3简介如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。...一般来说，移动端更新迭代很快，对CSS3支持良好, 因此我们在移动端没必要写太多的前缀，因为移动端的ios和Android的浏览器都是webkit内核。...::first-line :获取元素的第一行 ::selection ：获取选中的元素 CSS3阴影如何查看css3文档学会使用工具，可以让我们事半功倍。...表示0个或者1个 * 表示0个或者多个 {2,3} 表示范围文字阴影 text-shadow:文字阴影语法：text-shadow：水平偏移垂直偏移羽化大小颜色边框阴影...该值为空时，则对象的阴影类型为外阴影 CSS3背景在css2中已经有background属性了，用于设置盒子的背景相关的一些样式，在CSS3中新增加了几个背景相关的几个属性。

1K1 0

CSS三大特性

CSS进阶内容在学习了CSS基本知识之后，我们需要进一步了解CSS，因此写下了这篇文章当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园 CSS三大特性首先我们先来了解...中的继承：当子类未设置对应属性时，子类继承成父类的某些样式（例如：字体颜色，字体大小等）恰当使用可以简化代码，降低css复杂性子元素只能够继承父类的某些样式（text-，font-，line-这些元素开头的...，边框会汇聚在一起导致边框效果大打折扣所以css提供了border-collapse：collapse来合并边框 <!...不可以写outset，outset是默认的，如果写了会导致阴影失效注意：阴影不占用盒子大小下面我们给出代码示例： <!

1.2K1 0

如何在 CSS 中设计出漂亮的阴影？

然而，当我环顾网络时，很明显，大多数阴影并不像它们所希望的那样丰富，网络上覆盖着模糊的灰色盒子，看起来并不像影子。在本教程中，我们将学习如何将典型的箱形阴影转换为漂亮、逼真的阴影。...拖动”显示”滑块以查看我的意思：我希望我构建的应用程序感觉触觉和真实，就好像浏览器是进入不同世界的窗口一样。阴影有助于推销这种幻觉。这里也有一个战术上的好处。...如果我们的目标是创造深度的错觉，我们需要每一个阴影来匹配。否则，它看起来就像一堆模糊的边框：在自然界中，阴影是从光源投射而来的。...这在现代硬件上并不是一个大问题，但它可能会在较旧的廉价移动设备上减慢渲染速度。与往常一样，请务必进行自己的测试！...hsl(0deg 0% 0% / 0.4) 当我们在背景颜色上叠加黑色时，它不仅会使它变暗;它也使它变得不饱和。比较这两个框：左边的框使用透明的黑色。

3421 0

CSS3盒阴影 box-shadow

HTML5学堂：CSS3 的 box-shadow 有点类似于 text-shadow，只不过不同的是 text-shadow 是对象的文本设置阴影，在移动端我可以使用盒阴影来代替边框的效果，而 box-shadow...当然我们有时候会用盒阴影来代替边框，这是因为盒阴影是不占物理空间的，而边框会，导致了移动端设置自适应宽度受到了影响，那么接下来我们来看看盒阴影的使用！...不允许负值第4个长度值：可选，阴影外延值。不允许负值 color：设置对象的阴影的颜色。可以使用16进制颜色值，也可以使用英文单词，还可以采用rgba的表示法。...升高元素具有的效果就是让人感觉立体的，而且给人一个错觉，跟背景不是同一层面上。通常此效果可以用在按钮没被点击的效果上。...按钮效果的一个原理就是通过盒阴影升高效果，让元素具有立体感，而通过active 伪类设置位置向下移动，阴影的偏移值和模糊值发生改变，造成点击被按下的感觉。

2.4K6 0

移动web端常见bug汇总001

A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。...Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： A:代码如下 -webkit-appearance: none; 禁止文本缩放 Q:...Q: 解决字体在移动端比例缩小后出现锯齿的问题 A:代码如下 -webkit-font-smoothing: antialiased; 设置input里面placeholder字体的大小 Q: 设置input...里面placeholder字体的大小 A:代码如下 ::-webkit-input-placeholder{ font-size:10pt;} audio元素和video元素在ios和andriod中无法自动播放...A:方案如下 1 设置标签的autocomplete=”off”,亲测无效可能 2 设置盒子的内阴影为你常态的颜色（下面以白色为例） box-shadow:0 0 0 1000px #fff

1.9K4 0

移动端bug汇总（一）

A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。...Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： A:代码如下 -webkit-appearance: none; 4.禁止文本缩放 Q...Q: 解决字体在移动端比例缩小后出现锯齿的问题 A:代码如下 -webkit-font-smoothing: antialiased; 7.设置input里面placeholder字体的大小 Q: 设置...input里面placeholder字体的大小 A:代码如下 ::-webkit-input-placeholder{ font-size:10pt;} 8.audio元素和video元素在ios和andriod...A:方案如下 1 设置标签的autocomplete="off",亲测无效可能 2 设置盒子的内阴影为你常态的颜色（下面以白色为例） box-shadow:0 0 0 1000px #fff inset

3.2K13 0

移动端bug汇总（一）

A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。...Q: 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： A:代码如下 -webkit-appearance: none; 4.禁止文本缩放 Q...Q: 解决字体在移动端比例缩小后出现锯齿的问题 A:代码如下 -webkit-font-smoothing: antialiased; 7.设置input里面placeholder字体的大小 Q: 设置...input里面placeholder字体的大小 A:代码如下 ::-webkit-input-placeholder{ font-size:10pt;} 8.audio元素和video元素在ios和andriod...A:方案如下 1 设置标签的autocomplete="off",亲测无效可能 2 设置盒子的内阴影为你常态的颜色（下面以白色为例） box-shadow:0 0 0 1000px #fff inset

1.3K2 0

Css学习手册之基本篇

Css学习手册之基本篇每次写前端都是一个痛苦的过程，总是静不下来，彻底的研究下前端的技术，导致每次套页面都是直接采用一些封装好的控件，而有时对这些样式不满意时，又得百度一下该怎么用，低效且不愉快，强制自己好好的学习下基本功...-- 方式 c --> dd 对于标签的样式定义，特别是在引入css文件时，发现一个标签可能多重命中方式，有通过...，越大，则越上面 12. float 浮动 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。...往往是用于图像，但它在布局时一样非常有用。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...div 元素上，查看过渡效果。

1.8K6 0

CSS-03

解决方案：可以为父元素定义1像素的上边框或上内边距。可以为父元素添加overflow:hidden(overflow 属性规定当内容溢出元素框时发生的事情）。...在CSS颜色值 (opens new window)寻找颜色值的完整列表 inset 可选。从外层的阴影（开始时）改变阴影内侧阴影注意: 前两个属性是必须写的。其余的可以省略。...# CSS继承性所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。注意： 1....# CSS优先级定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题,即考虑权重的问题。 !...也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!

2K3 0

CSS3笔记

水平阴影的位置。允许负值 -v-shadow 必需的。垂直阴影的位置。允许负值 -blur 可选。模糊距离 -spread 可选。阴影的大小 -color 可选。阴影的颜色。...在CSS颜色值寻找颜色值的完整列表 -inset 可选。从外层的阴影（开始时）改变阴影内侧阴影背景 background-image 属性添加背景图片。...column-rule-style 属性指定了列与列间的边框样式： column-rule-width 属性指定了两列的边框厚度: column-rule-color 属性指定了两列的边框颜色： column-rule...flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。...center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

3.6K3 0

原来阴影可以这样玩？

当然我们有时候会用盒阴影来代替边框使用，这是因为盒阴影不占物理空间，而边框会占据空间，导致了移动端设置自适应宽度受到了精准度的影响，那么接下来我们来看看盒阴影是怎么使用的！ 2....rgba、颜色单词等方式来书写； 6）X阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果设置阴影类型为“inset”时，其投影就是内阴影。...实际上利用box-shadow来制作边框，只能说看上去像边框，但实质其并非边框，它和border还是有本质上的区别的。...CSS3盒阴影特效前面我们主要举例说明了如何利用box-shadow给元素加上阴影效果、阴影对布局有无影响以及如何应用阴影模仿元素边框效果等。...，那我们可以通过应用CSS3的transforms来实现另一边的效果，并且需要改变":after"伪元素定位方向（伪元素":after"在相反方向旋转，相对于":before"）。

2.1K5 0

魔改笔记六：twikoo及导航栏美化

在修改过程中，我也参考了一些小伙伴的内容，你可以在下方的引用链接中查看。...important"); 但经过查询得知，CSS 中的 display 属性无法实现动态效果，因此无法实现我们想要的渐变效果。于是我做了一些改进，给需要显示的元素单独添加了一个标签 visible。...随着页面向上或向下滚动，可以选择相应的元素。这样我们就可以通过 CSS 路径获取到该元素并随意添加内容了。最后一步是将第一个步骤中添加的元素替换为页面标题。...，使其开始时不可见 */ z-index: 1; /* 初始化层级为 1 */ position: absolute; /* 让元素在同一位置上叠加 */ } #nav .menus_items...，使其开始时不可见 */ z-index: 1; /* 初始化层级为 1 */ position: absolute; /* 让元素在同一位置上叠加 */ } /* 当元素显示时，重置

811 0

css学习笔记，持续记录。

默认阴影在边框外，即阴影向外扩散。：设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。取值参见。...设置阴影外延值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。需要考虑inset。取值参见。：可选参数。设置阴影的颜色。...理想视口宽度 = 移动设备横向分辨率 / DPR 视觉视口 visual viewport：如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小...当网页存在多层颜色的时候，透明度会导致颜色重叠出现色差，不同的是，字体颜色带有透明度时，能够根据背景自适应不同的背景颜色产生不同的效果。...增加和去除边框增加和去除边框导致元素的大小发生变化，同时影响到其他元素产生位移的偏差感：可以调整为边框一直存在，当不需要展示时显示透明，需要的时候再展示颜色。

2.6K6 0

css应知应会第二集

:可选，阴影的模糊大小 spread:可选，阴影的大小 color:可选，颜色 inset:可选，将默认的外阴影改为内阴影...4、负数目的是为了移动元素 margin-top 设置数据为正数时，元素向下移动...margin-left 设置数据为正数时，元素向右移动 margin-top 设置数据为负数时，元素向上移动 margin-left...1、父元素不能有上边框 2、为第一个子元素设置上外边距时解决方案...2、为父元素设置上内边距来取代子元素的上外边距弊端：父元素的高度会发生改变 3、在子元素之上再增加一个空

1.2K2 0

重温CSS3

，column-rule-width，column-rule-color：列的边框样式，列的边框宽度，列的边框颜色 column-span：元素跨越的列的数量 column-width：列的宽度 columns...CSS3 flex box（弹性盒子！） CSS3中引进的一种新的布局方式。作用：用来适应不同的屏幕大小、不同的设备类型，确保元素有恰当的行为！...弹性子元素在纵轴上对齐方式：align-items:stretch（默认，拉伸以适应容器）；center（中心）；flex-start（开头）；flex-end（结尾）；baseline（基线上）弹性子元素在横轴上对齐方式...：justify-content：flex-start（默认值，开头）；flex-end（结尾）；center（中心）；space-between（子元素平均分布在该行上）；space-around（子元素平均分布在该行上...15.响应式web设计：只使用html+css；所有设备上都能很好的显示！提升用户体验：根据用户行为或者不同的设备环境进行相应的相应和调整！

1.7K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

CSS:在移动设备上查看元素时导致奇怪阴影的边框颜色命令

相关·内容

面试题整理｜45个CSS面试题

移动web端常见bug

CSS layout（布局）

01-移动端开发教程-CSS3新特性

01-移动端开发教程-CSS3新特性（上）

H5C3第一节

CSS三大特性

如何在 CSS 中设计出漂亮的阴影？

CSS3盒阴影 box-shadow

移动web端常见bug汇总001

移动端bug汇总（一）

移动端bug汇总（一）

Css学习手册之基本篇

CSS-03

CSS3笔记

原来阴影可以这样玩？

魔改笔记六：twikoo及导航栏美化

css学习笔记，持续记录。

css应知应会第二集

重温CSS3

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐