无法正确看到彩色条带。

huangapple
go评论90阅读模式
英文:

not able to see color bands properly

问题

  1.     .blob {
  2.         height: 150px;
  3.         width: 150px;
  4.         border-radius: 58% 43% 33% 64%/50% 38% 53% 50%;
  5.         background: transparent;
  6.         box-shadow: inset 6px 33px 20px 0px #00FFFF, inset 20px 80px 15px 0px #Ffff00, 10px 20px 20px 0px #c9c9c9;
  7.     }
  8.     .blob:nth-child(1) {
  9.         position: absolute;
  10.         border-radius: 37% 54% 46% 46%;
  11.         background: white;
  12.         width: 50px;
  13.         transform: rotate(-30deg);
  14.         height: 15px;
  15.         top: 20px;
  16.         left: 40px;
  17.     }
  18.     .blob:nth-child(2) {
  19.         position: absolute;
  20.         border-radius: 50%;
  21.         background: white;
  22.         width: 10px;
  23.         height: 10px;
  24.         top: 60px;
  25.         left: 20px;
  26.     }
  1. <div class="blob"></div>
  2. <div class="blob"></div>
  3. <div class="blob"></div>
  4. <!--div class="blob"></div>
  5. <div class="blob"></div-->
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .blob {
  2.             height: 150px;
  3.             width: 150px;
  4.             border-radius: 58% 43% 33% 64%/50% 38% 53% 50%;
  5.             background: transparent;
  6.             box-shadow: inset 6px 33px 20px 0px #00FFFF, inset 20px 80px 15px 0px #Ffff00, 10px 20px 20px 0px #c9c9c9 ;
  7.         }
  8.         .blob:nth-child(1)
  9. 			{
  10.             position: absolute;
  11.             border-radius: 37% 54% 46% 46%;
  12.             background: white;
  13.             width: 50px;
  14.             transform: rotate(-30deg);
  15.             height: 15px;
  16.             top: 20px;
  17.             left: 40px;
  18.         }
  19.          .blob:nth-child(2)
  20. 		{
  21.             position: absolute;
  22.             border-radius: 50%;
  23.             background: white;
  24.             width: 10px;
  25.             height: 10px;
  26.             top: 60px;
  27.             left: 20px;
  28.         }
  29. /*
  30. .blob:nth-child(3) {
  31.   position: absolute;
  32.   border-radius: 60%;
  33.   background: aqua;
  34.   width: 30px;
  35.   height: 10px;
  36.   top: 80px;
  37.   left: 20px;
  38. }
  40. .blob:nth-child(4) {
  41.   position: absolute;
  42.   border-radius: 70%;
  43.   background: white;
  44.   width: 40px;
  45.   height: 10px;
  46.   top: 100px;
  47.   left: 20px;
  48. }
  50. .blob:nth-child(5) {
  51.   position: absolute;
  52.   border-radius: 80%;
  53.   background: white;
  54.   width: 40px;
  55.   height: 10px;
  56.   top: 120px;
  57.   left: 20px;
  58. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;blob&quot;&gt;&lt;/div&gt;
  2. &lt;div class=&quot;blob&quot;&gt;&lt;/div&gt;
  3. &lt;div class=&quot;blob&quot;&gt;&lt;/div&gt;
  4. &lt;!--div class=&quot;blob&quot;&gt;&lt;/div&gt;
  5. &lt;div class=&quot;blob&quot;&gt;&lt;/div--&gt;

<!-- end snippet -->

color bands Aqua,yellow,white are displayed at the moment

Next I tried to add more colour bands via 3 more child elements(using the commented code in my html and css snippet) but then display gets clobbered up.

So I am unable to understand where I am going wrong in my geometries/concepts

credit:twitter @NanouuSymeon

答案1

得分: 1

你的主要形状和背景被应用于.blob元素。然而，你随后使用nth-child来覆盖所有这些样式以应用特定于元素的样式，而没有留下主要元素来显示原始背景和形状。

尝试将.blob元素包装在一个不同的元素中，将形状和背景应用于该元素。这样，你就不会让nth-child覆盖主要形状。

英文:

Your main shape with the background is being applied to .blob elements. However you are then using nth-child to overwrite all those styles with element-specific styles, and there is no main element left to show the original background and shape.

Try wrapping the .blob elements in a different element that will have the shape and background applied just to it. That way you will not have your nth-child override the main shape.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .shape {
  2.   height: 150px;
  3.   width: 150px;
  4.   position: relative;
  5.   border-radius: 58% 43% 33% 64%/50% 38% 53% 50%;
  6.   background: transparent;
  7.   box-shadow: inset 6px 33px 20px 0px #800080, inset 20px 80px 15px 0px #Ffff00, 10px 20px 20px 0px #c9c9c9;
  8. }
  10. .blob:nth-child(1) {
  11.   position: absolute;
  12.   border-radius: 37% 54% 46% 46%;
  13.   background: white;
  14.   width: 50px;
  15.   transform: rotate(-30deg);
  16.   height: 15px;
  17.   top: 20px;
  18.   left: 40px;
  19. }
  21. .blob:nth-child(2) {
  22.   position: absolute;
  23.   border-radius: 50%;
  24.   background: white;
  25.   width: 10px;
  26.   height: 10px;
  27.   top: 60px;
  28.   left: 20px;
  29. }
  31. .blob:nth-child(3) {
  32.   position: absolute;
  33.   border-radius: 60%;
  34.   background: aqua;
  35.   width: 30px;
  36.   height: 10px;
  37.   top: 80px;
  38.   left: 20px;
  39. }
  41. .blob:nth-child(4) {
  42.   position: absolute;
  43.   border-radius: 70%;
  44.   background: white;
  45.   width: 40px;
  46.   height: 10px;
  47.   top: 100px;
  48.   left: 20px;
  49. }
  51. .blob:nth-child(5) {
  52.   position: absolute;
  53.   border-radius: 80%;
  54.   background: white;
  55.   width: 40px;
  56.   height: 10px;
  57.   top: 120px;
  58.   left: 20px;
  59. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;shape&quot;&gt;
  2.   &lt;div class=&quot;blob&quot;&gt;&lt;/div&gt;
  3.   &lt;div class=&quot;blob&quot;&gt;&lt;/div&gt;
  4.   &lt;div class=&quot;blob&quot;&gt;&lt;/div&gt;
  5.   &lt;div class=&quot;blob&quot;&gt;&lt;/div&gt;
  6.   &lt;div class=&quot;blob&quot;&gt;&lt;/div&gt;
  7. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月17日 08:46:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76267908.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定