<div style="width: 300px;height: 300px;background-color: rgba(47,41,90,0.14);overflow: hidden;">

<div style="background-color: red;width: 260px;height: 40px;position: absolute;top: 0px;left: 20px;" ></div>

        <div style="width: 300px;height: 300px;border: 40px dotted #36CBCB;box-sizing: border-box;position: relative;">

            <div style="background-color: #36CBCB;width: 260px;height: 260px;position: absolute;top: -20px;left: -20px;"></div>

        </div>

    </div>

我是填充了一层红色来当边框的背景，也是通过定位来实现的，由于先写层级低于后面的边框层

1、先说明一个概念，任意圆角说的是任意直径的圆角，不是20度角，22度角的概念

2、border中有个点线的类型，这个类型中，随着调整border的宽度，圆的直径就会随之变化

3、确定了圆的直径，只需要用矩形覆盖掉中间空的那块位置，就变成圆角矩形了

4、如果只是需要圆角，不是需要圆角矩形，直接取一个圆的四分之一就可以了

那好像是个网页

我的也是一样的耶

...........................................就这样，会了吗？

他问的是这个吧。。。

明白了。。。真是后知后觉哈哈

代码实现不会你还是先把基础的css学了的好 .obj .后面跟的是元素<div class="obj">通过你设置的类型 设置选择器设置css

理论上是可以的 但是教程中讲的是一种切合教程的方法

visible默认值。内容不会被修剪，会呈现在元素框之外。

hidden内容会被修剪，并且其余内容是不可见的。

scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit规定应该从父元素继承 overflow 属性的值。

看懂这个教程，首先要有一定的js基础，最重要的是要学完CSS3的变形、动画等新知识，还有HTML5有关音频的API，不然会比较吃力。

以上分别是火狐和谷歌截图

其他的隐藏了

听着挺好玩的啊哈哈

谷歌版本 59.0.3071.104（正式版本） （32 位） 也是小圆 火狐54.0 (32 位） 也是小圆 

.round {
   overflow: hidden;
   height: 100px;
   width: 100px;
  border: 1px solid red;
}
.double {
   border: 99px dotted red;
}

<div class="round">
   <div class="double"></div>
</div>

是不是之前这两个浏览器都是方形呢 还是我这边出现了什么问题 希望有朋友看到知道的能指点一下 谢谢

我很好奇你的圆是怎么出来的，连border属性都没有 还有你的id选择器不是应该用#这个吗*是通配符

我的是 width: 80px;border-top: 80px dotted red;overflow: hidden;

用border-color设置边框颜色，因为你要设置边框的颜色，直接用color并不能说明是给边框设置颜色。

三等分是说的double边框的两条线的宽度和这两条线之间的距离三等分。

比如说我们给一个border-left:9px double red; 那么图中的两条红线的宽度和这两条红线间的间距就是三等分，也就是都是3px。

所以要实现三等分就要把double边框的宽度设置为3的倍数。

en,我也希望。

你好，您可以尝试看看这篇，很基础的哦 http://www.imooc.com/learn/9