使用css锐利边缘到圆形边框？-Java 学习之路

我正在尝试创建一个带圆角边框的div元素 . 我知道 border-radius 的使用，但是我注意到使用这个属性只会弯曲角落，比如右上角，左上角等等所以我想知道是否有一些属性可以弯曲div的一侧顶部，底部，左侧和右侧的元素，如 border-radius .

例如，div具有直的顶部，底部和左侧但是圆形的右侧 . 我想创建右侧，使其在顶部比底部更圆 .

我的目标是创建一个右侧为圆形的div元素，不会影响顶部和底部 . 我的意思是右侧的曲线一到达顶部或底部就会停止 . （使顶部和底部保持笔直而不是略微弯曲） .

有没有办法使用CSS获得此效果？

3 回答

11
您可以通过斜杠符号指定horizontal and vertical border-radii来实现这样的效果......
```
div{
    width:100px;height:100px;
    border:3px solid #bada55;
    border-radius:10px/50%;
}
```
```
<div></div>
```
这将为所有边设置垂直边界半径为50％，水平边界半径为10px . 您可以单独为每个角定义此值（因此您最多有八个值） .
回复于 2024-04-20T15:41:29+08:00
2
您可以使用定义水平和垂直半径的 / 效果 . 10px是水平的，100px是垂直的
```
div
{
    height: 200px;
    width: 200px;
    border: 2px solid #000;
    border-radius: 10px/100px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
```
边框半径设置为 10px/100px ，这使得两侧略微弯曲 . 将左角设置为0，你只有一个弯曲的边:)

http://jsfiddle.net/UWbKf/
回复于 2024-04-20T15:41:29+08:00
2
您仍然可以使用 border-radius . 您必须使用您提供的参数更具创意 .

border-radius 允许您为每个角指定水平半径和垂直半径 . 如果您愿意，使用这些可以灵活地在整个元素的一侧拉伸曲线效果 .

一个随机的例子，形成一个奇形状的盒子：
```
.myElement { border-radius: 24% 41% 31% 9%/44% 6% 32% 40%; }
```
和here it is on jsFiddle .

我将链接到这个网站，展示了 border-radius 的灵活性，并允许您设计所需的形状，而不是给你大量详细的例子：http://www.webtutorialplus.com/border-radius.aspx

希望有所帮助 .
回复于 2024-04-20T15:41:29+08:00

使用css锐利边缘到圆形边框？

3 回答

相关问题