在CSS循环周围使用overflow:hidden; [英] Pixelated edge around a CSS Circle with overflow: hidden;
问题描述
以下是我的猫/动画的,我昨天开始使用CSS。一切都非常好,我也做了一个。删除阴影删除,但是,您仍然可以轻微侦测到变色。所以我将下面的答案更新为 这里是(更新为 Here is the JSFIDDLE of my cat/animation without any The owl is not what this question is about , just an example of a similar situation I was in. The jsfiddle/cat is what this question is about, sorry for the mix up! Here is a JSFIDDLE for my cat with an inset box shadow using the The answer on here does solve what I saw with my Owl image but not for what this answer is about. Here is the cat with an I have tested this fiddle in Safari, Chrome, and Firefox and they all seem to display it the same. I have two eyes on the Cheshire Cat that I started making yesterday out of CSS. Everything renders very well and I also have made an Owl(I first thought this was a similar situation but it is NOT) out of CSS that has a very minor yet similar problem on the eyes being pixelated around the edges. I have also tried to give the eyes a border of the purple color but the pixelated edge stayed the same on the edge of the border. On my new CSS creation the outside edge of the eyes is very pixelated and seem to be the color(yellow) of the parent circle. Here is the CSS for the eyes. Below is the jsfiddle I used to make this animation/creature. I believe the problem is being caused by... I think the root of the problem is being caused by the It seems to cut the eyelids off by Images also are not out of the question but I would like to stick with making a CSS image first for a learning reason. List of styles that do not help Not a Firefox only bug End List Updates A work around is adding an eye socket or outer main tag to the eye. This hides the pixelation but is only a workaround to the problem. See apaul34208 answer for more details Here is the problem with apaul34208 answer, See how the left and top side of the eye is flat, I would love to know if my question is a browser problem or css. End Updates Best option as of 11/13/2013 Using a background gradient on the This also does work in Firefox, Chrome, Safari, and IE. (A little ruff in IE bu much better then before) Any and all help is greatly appreciated! This requires no extra html markup. I have tested it on Firefox (and it is confirmed to work on Safari and Chrome as well, see comments). It makes the background of the eye the purple color some distance in from the edge, and then the yellow the rest of that using a radial background gradient for the color. This seems to avoid the "blending" (and yellowing) seen along the edge where it is attempting to "hide" based on the Here is the original solution/fiddle example with Here is the (updated to
这篇关于在CSS循环周围使用overflow:hidden;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! 2px
宽紫色边框,
2px
)code:
.eye {
border-radius:50 %;
height:100px;
width:100px;
background:#fad73f; / *旧浏览器* /
背景:-moz-radial-gradient(center,ellipse cover,#fad73f 0,#fad73f 48px,#821067 49px); / * FF3.6 + * /
background:-webkit-gradient(径向,中心中心,0,中心中心,100%,颜色停止(0,#fad73f),颜色(48px,#fad73f) color-stop(49px,#821067)); / * Chrome,Safari4 + * /
background:-webkit-radial-gradient(center,ellipse cover,#fad73f 0,#fad73f 48px,#821067 49px); / * Chrome10 +,Safari5.1 + * /
background:-o-radial-gradient(center,ellipse cover,#fad73f 0,#fad73f 48px,#821067 49px) / * Opera 12+ * /
background:-ms-radial-gradient(center,ellipse cover,#fad73f 0,#fad73f 48px,#821067 49px); / * IE10 + * /
background:radial-gradient(椭圆在中心,#fad73f 0,#fad73f 48px,#821067 49px); / * W3C * /
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
overflow:hidden;
position:relative;
display:inline-block;
box-shadow:0 3px 15px rgba(0,0,0,0.4);
z-index:100;
}
drop-shadows
to show the problem as clearly as I can. To my understanding this is being caused by the border-radius
and possibly due to overflow: hidden;
.
blur
property of a box-shadow
and the pixelated edge is still the same around the eye.inset box-shadow
while using the third value, blur
.
.eye {
border-radius: 50%;
height: 100px;
width: 100px;
background: #FAD73F;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
position: relative;
display: inline-block;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
z-index: 100;
}
.pup {
border-radius: 50%;
height: 20px;
width: 20px;
background: #2b2b2b;
display: block;
position: absolute;
top: 40px;
left: 40px;
}
.lidT {
display: block;
width: 100px;
height: 100px;
background: #821067;
position: absolute;
top: -80px;
z-index: 20;
}
.lidB {
display: block;
width: 100px;
height: 100px;
background: #821067;
position: absolute;
bottom: -80px;
z-index: 20;
}
.lidT
and .lidB
classes I have contained inside of my .eye
.1px
around the edge of it. Try making the eyes blink in the fiddle to see what I mean.
box-shadow
border
box-sizing
.eye
seems to be the cleanest solution so far. Refer to ScottS answer.Using Background Gradient
border-radius
and overflow: hidden
combination.1px
of purple. With the drop shadow removed, however, you can still slightly detect a discoloration. So I updated the answer below to a 2px
wide purple border, which this winking cat with drop shadow removed shows that no discoloration is occurring.2px
) code:.eye {
border-radius: 50%;
height: 100px;
width: 100px;
background: #fad73f; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #fad73f 0, #fad73f 48px, #821067 49px); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,#fad73f), color(48px,#fad73f), color-stop(49px,#821067)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #fad73f 0,#fad73f 48px,#821067 49px); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #fad73f 0,#fad73f 48px,#821067 49px); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #fad73f 0,#fad73f 48px,#821067 49px); /* IE10+ */
background: radial-gradient(ellipse at center, #fad73f 0,#fad73f 48px,#821067 49px); /* W3C */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
position: relative;
display: inline-block;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
z-index: 100;
}