【CSS世界】01border-radius深入理解
时间：2023-04-05 00:14:10
HTML5
如上图，最近遇到需要实现上图的效果。外矩形好说，阴影部分就难了。不知为何，我居然第一眼就想用canvas中的贝塞尔曲线画出来。..最近，我开始使用画布。.言归正传，其实这个效果可以用纯CSS来实现，也就是本节的主角，border-radius。1、border-radius的另一种形式我们通常使用border-radius的形式如下：.style{border-radius:5px;}这是一种简写形式，即border-radius:5px5px5px5px/5px的简写形式5px5px5px的padding和margin是一样的。但也有区别。border-radius的四个值从左上角开始顺时针循环，而padding和margin的四个值分别是：top->right->bottom->left。此外，border-radius的形式是一种比率形式。这是一个例子：
举个例子，基本一目了然。我们可以发现border-radius:50px50px50px50px/50px100px20px0px其实可以翻译成：border-radius:左上角的水平长度和右上角的水平长度Value下角的水平长度rightcorner左下角水平长度值/左上角垂直长度值右上角垂直长度值右下角垂直长度值左下角垂直长度值垂直长度值2.使用border-radius实现前面的要求；高度：200px；边界半径：5px；显示：弹性；背景色：rgb(61,148,248)；}.header{显示：块；高度：40px；行高：30px；;边界半径：5px000/5px000；背景色：rgba(0,0,0);}
文字内容 先做该做的，架好架子。按照上面的代码，如果不出意外的话，实现的效果是这样的??。接下来根据本小节第一小节的结论，尝试实现曲线效果。仔细观察效果图，图中其实只有两个角需要处理，分别是左上角和右下角。所以现在把.header中的border-radius设置为5px0X0/5px0Y0，其中X和Y暂时代表未知。再看效果图，可以发现横向长度和纵向长度分别是span标签的宽和高，但是由于文字长度不固定，所以span标签的宽度也不固定，所以可以设置x=100%。那么Y=40px。现在看看效果??。不要慌，给span加一个内边距，控制最大宽度，然后调整背景的透明度。终于可以实现第一张图的效果了，阴影部分是动态的，放代码吧。..<样式>.block{宽度：300px；高度：200px；边界半径：5px；显示：弹性；背景色：rgb(61,148,248)；-高度：30px；颜色：#fff；填充：040px010px；边框半径：5px0100%0/5px040px0；背景色：rgba(0,0,0,0.1);/*whatever无论背景色如何变化，都是透明的*/max-width:50%;/*控制最大宽度*/overflow:hidden;/*下面三个是控制溢出部分的*/text-溢出：省略号；空白：nowrap；}
文字内容 3.border-radius的其他特性根据大佬的秘籍，border-radius还有另外两个特征，即大值特征和等比特征，这里就不说了（其实已经是深夜了...)，可以参考老大的秘籍。源码在此供参考：[1]秋月几时，CSS3border-radius你知多少？
