css怎么写突出的圆,圆形突出显示css3(Circular highlight css3)

最新推荐文章于 2024-07-22 18:36:52 发布

三杉

最新推荐文章于 2024-07-22 18:36:52 发布

阅读量949

点赞数

文章标签： css怎么写突出的圆

圆形突出显示css3(Circular highlight css3)

如何在网站上的任何对象上制作圆形突出显示....

我一直在四处寻找，几乎找不到任何相关的文档。虽然我似乎相信现在用css可以做任何事情，但有些东西告诉我这只能用像canvas这样的东西来获取并占用大量内存。

我见过的唯一一篇关于这个的帖子就是这个... (jquery)遮屏整个屏幕并突出显示页面的一部分？虽然他们没有解决那里的通告问题

我已经在一些网站上看到如何突出显示某个元素，但是如何将突出显示的区域设为圆圈呢？通过仅添加z-index使正方形元素显示在叠加层上方，似乎不可能使该区域成为圆形。

也许我可以对包含在圆圈中的每个元素进行z索引，并在边缘周围创建与叠加相同颜色的阴影(但如果聚光灯需要运行到背景的一部分上，我需要包括整个背景和这可能会变得丑陋)......在某些情况下，这实际上可能有效，但听起来有点怪，不是吗？

任何人都有一个很好的解决方案，突出显示页面上的对象，但突出显示为一个圆/几乎像聚焦一个元素...

how to make a circular highlight over any object on a site....

I been looking around and can't find almost any documentation for this. Although I seem to believe that anything is possible now with css, something tells me this would only be available with something like canvas and take a lot of memory.

The only other post I've seen about this is this one... (jquery) Blackout the entire screen and highlight a section of the page? although they didnt address the circular issue there

I've seen on a few sites how to highlight a certain element, but how exactly would you make the highlighted area a circle? By only adding z-index to make a square element show above the overlay, it seems impossible to make the area a circle..

Maybe I could z-index every element that would be included in the circle and create a shadow around the edges the same color as the overlay(but if the spotlight needs to run onto part of the background i would need to include the entire background and that could turn ugly)...this may work actually, in certain cases, but that sounds a bit jenky, no?

anyone have a good solution for highlighting objects on a page but that highlight being a circle / almost like spotlighting a element...

原文：https://stackoverflow.com/questions/21122376

更新时间：2020-01-19 20:23

最满意答案

你可以用border-radius和box-shadow做到这一点至少这是我用纯 css想到的唯一方法

你做的是制作一个带有transparent背景的圆形元素，然后你给它一个完全黑色的box-shadow ，它将填满整个页面，你可以得到一些惊人的效果。

示例代码

#torch{

width: 200px;

height: 200px;

background: transparent;

border-radius: 50%;

position: fixed;

box-shadow: 0px 0px 0px 2000px #000, 0px 0px 50px inset;

}

不要忘记添加前缀-moz-, -webkit- ..etc如果需要，不要忘记你的z-index 。

You can do this with border-radius and box-shadow at least that's the only way I can think of with pure css

What you do is you make an element that is circle with a transparent background, then you give it a box-shadow completely black that will fill the whole of your page, and you can get some amazing effects.

Example code

#torch{

width: 200px;

height: 200px;

background: transparent;

border-radius: 50%;

position: fixed;

box-shadow: 0px 0px 0px 2000px #000, 0px 0px 50px inset;

}

Don't forget to add your prefixes -moz-, -webkit- ..etc and don't forget your z-index if you need it.

相关问答

Chrome / Safari中的::selection伪元素无法正常工作。元素将成为标准的高亮颜色。这是一个非常古老但仍然出色的bug： https://bugs.webkit.org/show_bug.cgi?id=38943 唯一能解决的解决方法是使用contenteditable元素而不是元素。这是我创建的演示： http : //jsfiddle.net/ThinkingStiff/FcCgA/ 我写了一篇关于它的文章： https : //stacko

...

div的宽度和高度应该相同以产生一个圆。例如： http : //jsfiddle.net/wGzMd/ 这是CSS： div{

position: absolute;

top: 50px;

left: 50px;

width:100px;

height:100px;

border: 1px solid green;

background: green;

border-radius: 360px;

}

编辑(针对细分)： http://jsfiddle.net/wGzMd/3/ CSS：

...

这个选择器： #awesome .favorite:not(#awesome) .highlight

比这个具有更高的特异性： #awesome .highlight:nth-of-type(1):nth-last-of-type(1)

关于我的头顶，我不知道nth-of-type或非声明是如何影响特异性的，但粗略地说，第一类有两类，第二类只有一类，所以它有点意义，它会是更具体。在CSS中，更具体的选择器会覆盖不太具体的选择器，而不管顺序如何，所以您的文本是红色的。当然，如果你拿出红色课，

...

您无法禁用它们，您只能使用CSS覆盖样式： body * {

text-shadow:none;

...etc...

}

(嘿，我从来没有说过这样做是个好主意，但它会起作用) 编辑：这个答案让我走上正轨; 谢谢。这是解决方案：创建一个名为NoCSS3的类，定义如下： .NoCSS3 * {

text-shadow: none !important;

box-shadow: none !important;

border-radius: 0px !impor

...

它说找不到该文件。尝试将图像文件名重命名为1 - hostinger-600x400-2.gif其从hostinger-600x400-2.gif重命名为hostinger600x4002.gif并在更改页眉和页脚中的引用后进行部署 it says that the file is not found. Try to rename the image file name to one without - i.e rename it from hostinger-600x400-2.gif to

...

似乎删除jquery mobile就可以了。相反，我用于刷卡事件hammer.js以防万一有人介入相同的问题;) It seems removing jquery mobile did the trick. Instead im using for swipe events hammer.js in case anyone steps in with the same problem ;)

您想要调整当前项目的唯一选择器是： #areas:hover > div {

opacity: 0.5;

-webkit-transition: all 0.5s linear;

transition: all 0.5s linear;

}

#areas:hover > div:hover,

#areas:hover > div:hover * {

opacity: 1;

background-color: #ffa;

-webkit-transi

...

你可以用border-radius和box-shadow做到这一点至少这是我用纯 css想到的唯一方法你做的是制作一个带有transparent背景的圆形元素，然后你给它一个完全黑色的box-shadow ，它将填满整个页面，你可以得到一些惊人的效果。示例代码 #torch{