CSS border-radius xy是否存在？
齐达尔
假设我们有一个简单的div，他的宽度是==高。
<div id="test"></div>
和CSS看起来像：
#test {
width: 200px;
height: 50px;
border-radius: 30%;
border: 5px solid black;
}
边界半径百分比使长边更弯曲。以px为单位的值将使边界曲线相等：
#test{
border-radius: 30px;
}
我的问题是，是否有一种方法（使用CSS）以px（与更改div大小无关）来操纵此像素（例如，div的短边更弯曲）？或只能通过画布实现。
约翰尼斯
如果希望所有圆角都相同，则可以在两个值之间使用斜线，或者可以对单个角使用选择器，并在两个角之间使用不带斜线的两个值来获得每个角的独立结果，例如 border-top-left-radius: 45px 80px;
这是三个示例（我添加了一个对称示例，类似于您的问题中的示例）：
.x {
width: 300px;
height: 200px;
border: 2px solid green;
border-radius: 45px / 80px;
}
.y {
width: 300px;
height: 200px;
margin-top: 30px;
border: 2px solid red;
border-top-left-radius: 45px 80px;
border-top-right-radius: 125px 60px;
}
.z {
width: 300px;
height: 100px;
margin-top: 30px;
border: 2px solid blue;
border-top-left-radius: 80px 65px;
border-bottom-left-radius: 80px 65px;
border-top-right-radius: 80px 65px;
border-bottom-right-radius: 80px 65px;
}<div class="x"></div>
<div class="y"></div>
<div class="z"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
构建类似于Jarvis的本地语言应用程序
- 2
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 3
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 4
SQL Server中的非确定性数据类型
- 5
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 6
Swift 2.1-对单个单元格使用UITableView
- 7
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 8
HttpClient中的角度变化检测
- 9
如何了解DFT结果
- 10
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 11
Embers js中的更改侦听器上的组合框
- 12
在Wagtail管理员中，如何禁用图像和文档的摘要项？
- 13
如何避免每次重新编译所有文件？
- 14
Java中的循环开关案例
- 15
ng升级性能注意事项
- 16
Swift中的指针替代品？
- 17
如何使用geoChoroplethChart和dc.js在Mapchart的路径上添加标签或自定义值？
- 18
使用分隔符将成对相邻的数组元素相互连接
- 19
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 20
ggplot：对齐多个分面图-所有大小不同的分面
- 21
完全禁用暂停（在内核级别？-必须与使用的DE和登录状态无关！）
我来说两句