小编Ste*_*ide的帖子

我想在这个图像中围绕一个圆圈中的数字:

这可能吗？它是如何实现的？

你如何使用HTML5和CSS3绘制圆圈？

是否也可以将文字放入？

我刚刚遇到了一个巧妙的CSS技巧.看看小提琴......

.tooltiptail {
  display: block;
  border-color: #ffffff #a0c7ff #ffffff #ffffff;
  border-style: solid;
  border-width: 20px;
  width: 0px;
  height: 0px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

这会产生一个小箭头/三角形效果,一个"工具提示尾巴".这让我大吃一惊!我真的很想知道它是如何工作的？!

此外,有没有办法扩展这个CSS技巧来创建一个效果,如下所示:

这是一个有趣的问题.这可以仅使用CSS来完成,暂时忽略阴影吗？

更新1

我想出了我最初问题的解决方案.这是小提琴......

http://jsfiddle.net/duZAx/7/

HTML

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

CSS

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff …

我试图用CSS完成两个div的边框:

我尝试过使用border-radius,但两个部分圆圈没有压在一起:http://jsfiddle.net/uwz6L79w/

 .left {
   position: absolute;
   left: 0;
   top: 0;
   width: 100px;
   height: 100px;
   border-width: 4px;
   border-color: black white black black;
   border-style: solid;
   border-radius: 60px
 }
 .right {
   position: absolute;
   left: 104px;
   top: 0;
   width: 100px;
   height: 100px;
   border-width: 4px;
   border-color: black black black white;
   border-style: solid;
   border-radius: 60px;
 }

<div class="left"></div>
<div class="right"></div>

我可以进一步将它们压在一起,但我必须让另一个div重叠,如下所示:http://jsfiddle.net/uwz6L79w/1/.

.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  border-width: 4px;
  border-color: black …

如何在CSS中制作带箭头的方框？

圆角很容易.但任何想法在不使用图像的情况下在左侧制作箭头.

是否有可能实现

只有一个元素 <p>....</p>

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}

<p></p>

当您使用Mobile Safari 转到http://m.google.com页面时,您会在页面顶部看到漂亮的栏.

我想画一些梯形(美国:梯形),但我不知道如何.我应该使用css3三维变换吗？如果你有一个很好的方法来实现它,请告诉我.

我正在尝试学习HTML和CSS,但我遇到了一个问题:

<style style="text/css">
    div.slide-slow {
        width: 100%;
        overflow: hidden;
    }

    div.slide-slow div.inner {
        animation: slide-slow 30s;
        margin-top: 0%;
    }

    @keyframes slide-slow {
        from {
            margin-left: 100%;
        }

        to {
            margin-left: 0%;
        }
    }
</style>

<div class="slide-slow">
    <div class="inner">
        <img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
    </div>
</div>

我希望这个CSS循环,而不是只在它完成时停止.是否可以使CSS函数循环？

(它适用于其他浏览器,但不适用于chrome)

我想仅在浏览器大小小于1400px时应用样式

与max-width不工作

@media only screen and (max-width:1400px)  {
.heading-left {
    left: -0.5%;
  }
}

与min-width它的工作

@media only screen and (min-width:480px)  {
.heading-left {
    left: -0.5%;
   }
}

但是当浏览器宽度超过1400px时也会改变(我知道它是如何工作但最大宽度不起作用)

小提琴这个

https://jsfiddle.net/j4Laddtk/

CSS3定义了一个font-size被调用的新长度单位rem.这允许我们计算元素font-size与根元素(html元素)的关系.

为了font-size更容易计算,我们通常假设根元素font-size是16px,因此CSS通常最终会像这样:

html { font-size:62.5%; } // 10px = 16px * 0.625

因此,每个元素高度与例如rem相对10px

p{ font-size : 1.4rem ;} // 14px = 10px * 1.4 

我无法找到为什么我们假设我们可以乘以16px？我们怎样才能相信每个浏览器都具有相同的基值16px？是否有关于预定义的标准描述16px？

参考

• MDN字体大小
• W3C rem
• 关于rem的话
• Github skeleton.css

我一直在尝试在CSS中为项目创建响应式云形状.由于HTTP请求和响应性要求,我试图不使用图像,CSS或内联SVG.

有问题的形状是这样的:(但可能类似 - 轻微的变化/改进会很酷):

我找到了这两个问题,但它们似乎不符合我的确切需求:

• 如何使用CSS填充文本颜色？
• CSS将边框应用于云形状？

我尝试(并且失败)创建一个带有border或者box-shadow需要知道是否可以使用CSS或作为替代内联SVG 的云.我也看过Canvas也是一个选项,但我宁愿远离它,因为它可能会非常复杂.

这是我糟糕的尝试

body {
  background: skyblue;
}

.cloud {
  width: 15%;
  height: 10vh;
  background: white;
  position: relative;
  margin: 100px 100px;
  border-radius: 65px;
  box-shadow: black 0 0 10px 10px;
}
.cloud:after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  top: -60px;
  left: 100px;
  border-radius: 75px;
  background: white;
}
.cloud:before {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  background: white;
  left: 50px;
  top: -30px;
  border-radius: 35px; …