整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
顾那个只能用图片展示形状的日子，之前接触前端的小伙伴们，大家一定会有颇多感触，好在现在我们可以使用纯CSS实现更多想要的形状效果，今天小编来整理一下，希望对大家有所帮助，也方便自己后期的查看。
使用border-radius制作一个圆很简单，只要给任何正方形元素设置固定宽高及一半长度以上的border-radius，就可以得到圆形
圆形
椭圆
在实际开发中可能更多的是让元素根据内容自动调增，而不是事先设置好宽高，因为很多时候内容是不定的。我们期望：如果宽高相等，就显示一个圆，不相等就显示一个椭圆。
上面代码实现不了，当宽度大于高度的时候，便会出现下面这种情况：
解决方案：
border-radius可以单独指定水平和垂直半径，只要用一个(/)分隔这两个值就行。还一个特性是，它可以接受长度值，还可以接受百分比，两种特性结合，就可以自适应了。
由于斜杠前后的两个值现在是一致的，可以简写
半椭圆
border-radius是一个简写属性，包含四个展开式属性，这样一来可以通过设置四个角的不同半径来达到效果。
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
通过属性名字可以很清楚的知道他们用于设置哪个角。
我们甚至可以为所有四个角提供完全不同的水平和垂直半径，方法就是在斜杠前指定1~4个值，斜杠后指定1~4个值。这两组值是单独展开为四个值。
比如border-radius：10px / 5px 20px,相当于10px 10px 10px 10px / 5px 20px 5px 20px;
我们要实现
弄清了，border-radius的用法，开始分析上面半椭圆的实现
这个形状是垂直对称的，意味着左上角和右上角的半径值应该相同，右下角和左下角半径也是相同
顶部边缘没有平直的部分，意味着左上角和右上角半径之和应该等于整个形状的宽度，结合上一条，左半径和右半径在水平方向上是50%。
垂直方向，顶部的两个圆角占据了整个元素的高度，而且底部没有任何圆角，因此在垂直方向上值应该好似100% 100% 0 0。
因为底部两个角的垂直圆角是零，那么他们的水平圆角是多少就完全不重要了
想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。
沿纵轴劈开的半椭圆
四分之一的椭圆
创建一个四分之一椭圆，其中一个角水平和垂直半径值都需要100%，而其他三个角都不能设为圆角
就这样各种方向的椭圆效果就描绘出来了，喜欢的小伙伴可以多多支持点赞，转发哦！
后面会继续分享其他形状的具体实现。
你把一个正方形元素的border-raidus设置的足够大的时候，你就得到了一个圆形，你也可能会发现，只要指定border-radius的值大于正方形边长的一半以后，你就得到了一个圆形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background: #fb3;
width: 200px;
height: 200px;
border-radius: 150px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>不过，我们往往不是很想去固定一个元素的高度与宽度，而是希望它能根据内容自动去调整与适应，也就是说：如果它的宽高相等，那么就显示一个圆，如果不想等就显示一个椭圆。
其实border-radius是可以单独指定水平半径和垂直半径的，只要用一个“ / ” 分开即可。
并且它不仅可以接受长度值，也可以接受百分比值。这个百分比值会基于元素的尺寸进行解析。
<style>
.box{
background: #fb3;
width: 200px;
height: 300px;
border-radius: 50%
}
</style>既然已经可以生成一个自适应的椭圆，那么能不能生成椭圆的一部分？
其实border-radius是一个简写属性，其扩展属性是：
但我们还是偏向于用border-radius这个简写属性，我们可以一次性提供并且用空格分开。
如果我们传给它4个值，这个四个值就被分别从左上角开始以顺时针顺序应用到元素的各个拐角。
如果是3个值，则第四个值与第二个值相同。
如果是2个值，则一和三相同，二和四相同。
如果1个值，则四个值都相同。
我们也可以为所有4个角提供完全不同的水平和垂直半径，方法是“/”前指定水平的1～4个值，“/”后指定垂直的1～4个值，顺序和规律与之前论述的相同。
因此，我们可以得到一个半椭圆：
<style>
.box{
background: #fb3;
width: 200px;
height: 200px;
border-radius: 50% / 100% 100% 0 0;
}
</style>半椭圆分析如下：
四分之一圆：
shape的意思是图形，CSS shapes也就是css 图形的意思了，也就是使用CSS生成各种图形（圆形、矩形、椭圆型、多边形等集合图形）。在CSS3之前，我们能做的只有生成矩形，四四方方，条条框框。
我们先来看看使用shapes后，我们的显示效果吧。
是不是很酷炫？那么我们怎么才能做到这样的效果呢。
首先我们需要了解shape下面的一个属性 shape-outside。
它也具有制造各种集合图形的能力，但是它只能和浮动 float 一起使用。
虽然使用上有所限制，但是它赋予了我们一种更为自由的图文混排能力。
让我们看下代码
css部分
html部分
好了，这就是shape-outside写好的一个小demo。希望大家会喜欢。
如果还想更深入的了解前端知识，请大家关注我，我会不定期的发一些关于前端的知识。
谢谢大家的观看。
*请认真填写需求信息，我们会在24小时内与您取得联系。
