border-radius的一些知识

border-radius设置成50% 就能得到一个圆，但是如果你的border-radius足够大，也是可以得到一个圆的。

border-radius单值实际上是一种简写。他其实和padding一样，上右下左。四个值。设置四个边的圆角。

你也可以只设置某一边的border-bottom-left-radius:10px.

Chrome opacity非1时border-radius圆角边框剪裁问题

左边好像被切了一样的。

出现这种渲染问题，需要满足下面两个条件：

1. 元素的透明度opacity不是1；
2. 元素的位置并不是完美起止于屏幕的像素点上

解决办法：

第一种：元素尺寸和位置都在都是整数像素

然而很多时候这种方法并不切实际，尤其对于复杂布局，例如我们使用calc计算对元素宽度定位时候，或者line-height使用不容易计算的小数时候，或者基于rem的布局等等，想要强制元素尺寸和位置都是整数并不太容易。

第二种：不使用opacity实现半透明

既然我们的问题出现与opacity不是1有关，那我们就不使用opacity实现半透明，采用其他的方法代替。

如果我们想使一个边框变成半透明，除了opacity外，我们还可以使用RGBA或者HSLA颜色。

.ele {    display: inline-block;    width: 40px; height: 40px;    border: 1px solid hsla(0,0%,100%,.6);    border-radius: 50%;   }

上面的60%透明度白色边框也可以使用RGBA颜色表示：rgba(255,255,255,.6)。效果是一模一样的，也能让边框完美显示。

那为什么上面我用的是HSLA颜色表示而不是RGBA颜色表示呢？

因为使用HSLA表示白色要比RGBA表示白色可以少2个字母。

这就是我的颜色表示的一个小秘密：白色半透明使用HSLA颜色表示，黑色半透明使用RGBA颜色表示