如何通过CSS创建圆形
[英]How to create rounded shape by CSS
问题描述
Is it possible to create the same shape by CSS like this image? 
是否可以像这样通过CSS创建相同的形状？ I can use the original image file in my HTML, but I want to use the same shape by CSS. 我可以在HTML中使用原始图像文件，但是我想通过CSS使用相同的形状。 I don't understand how doing this. 我不知道该怎么做。 I have used border with :before, :after property, but could not give the same shape. 我已经使用border与：before，：after属性，但是不能给出相同的形状。 What can I do now? 我现在能做什么？
Example 例
5 个解决方案
解决方案1
1 已采纳 2014-07-15 06:25:09
Visit this link for all possible shapes CSS Shapes 访问此链接以获取所有可能的形状CSS形状
for round shape 圆形
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */ / *更干净，但支持程度略低：使用“ 50％”作为值* /
for html 5 cnavas animated waves 对于html 5 cnavas动画波
<html>
<head>
<style>
body {
margin: 0;
}
h1 {
position: absolute;
bottom: 10px;
left: 10px;
margin: 0;
color: #FFF;
z-index: 10;
font-family: Helvetica, sans-serif;
}
#canvas {
background-color:#FAFAFA;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
</style>
</head>
<body>
<h1>Waves</h1>
<canvas id="canvas" width="400" height="400"></canvas>
<script type='text/javascript'>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var waves = ["rgba(157, 187, 210, 0.3)",
"rgba(171, 216, 201, 0.3)",
"rgba(135, 199, 215, 0.3)",
"rgba(223, 233, 235, 0.3)"]
var i = 0;
function draw() {
canvas.width = canvas.width;
for(var j = waves.length - 1; j >= 0; j--) {
var offset = i + j * Math.PI * 12;
ctx.fillStyle = (waves[j]);
var randomLeft = (Math.sin(offset/100) + 1) / 2 * 200;
var randomRight = (Math.sin((offset/100) + 10) + 1) / 2 * 200;
var randomLeftConstraint = (Math.sin((offset/60) + 2) + 1) / 2 * 200;
var randomRightConstraint = (Math.sin((offset/60) + 1) + 1) / 2 * 200;
ctx.beginPath();
ctx.moveTo(0, randomLeft + 100);
// ctx.lineTo(canvas.width, randomRight + 100);
ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight + 100);
ctx.lineTo(canvas.width , canvas.height);
ctx.lineTo(0, canvas.height);
ctx.lineTo(0, randomLeft + 100);
ctx.closePath();
ctx.fill();
}
i = i + 3;
}
setInterval("draw()", 20);
</script>
</body>
</html>
解决方案2
1 2014-07-15 06:26:21
只需在border-radius上添加前缀就可以了。
#circle { width:100px; height:100px; border-radius:50%; background:#ccc; }
解决方案3
0 2014-07-15 06:18:59
You can use following : 您可以使用以下命令：
<img style="border: 2px solid black;
border-radius: 30px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;"
src="abc.jpg" />
I hope it will work. 我希望它能起作用。
解决方案4
0 2014-07-15 06:35:15
for rounded border you can refer following code. 对于圆角边框，您可以参考以下代码。
html : html：
<div class="cirlce"></div>
css: CSS：
.cirlce {
width: 300px;
height: 300px;
background-color: red;
border-radius: 150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
}
解决方案5
-1 2014-07-15 06:33:59
Using CSS, you can achieve whatever shape you want. 使用CSS，您可以实现所需的任何形状。
But, for that you have to combined two or more DIVs . 但是，为此，您必须组合两个或多个DIVs 。
See this reference url for custom shapes. 有关自定义形状，请参见此参考网址。
This will be very helpful for you to create custom shape. 这将对您创建自定义形状非常有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.