圆形突出显示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{
width: 200px;
height: 200px;
background: transparent;
border-radius: 50%;
position: fixed;
...
在CSS中轻松完成的是旋转某些东西。 为了使它以椭圆形状环绕,你可以使旋转的地方变形。 并且,要使正在旋转的对象保持纵横比,您需要撤消先前的变换。 HTML:
和CSS .deform {
width: 200px;
height: 200px;
-webki
...
是的,很有可能使用CSS媒体查询 - http://www.css3.info/preview/media-queries/ .mydiv {
width: 80%; /* normal case */
}
/* special case if screen width < 500 */
@media all and (max-width: 500px) {
.mydiv {
width: 320px;
}
}
Yes, it is very m
...