|
阅读:2866回复:0
border-radius 8个值时
border-radius
正常的取值 border-radius: 4px; border-radius: 4px 6px 6px 4px; 然而还可以这样用 #add { border-radius: 3px 1px 3px 2px / 6px 4px 1px 3px; } border-radius 的8个属性值,实现任意曲线边框 示例: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin: 100px 100px;
border: 2px solid red;
/* x轴 上1 右2 下3 左4/y轴上5 右6 下7 左8*/
border-radius:5px 10px 15px 20px/15px 20px 30px 50px;}
</style>
</head>
<body>
<div></div>
</body>
</html>如图:图片:4.jpg ![]() 参考: https://www.jianshu.com/p/71d2bc4e839e https://blog.csdn.net/weixin_40624809/article/details/102892725 深入理解border-radius: https://blog.csdn.net/wll_web/article/details/103872397 |
|
|
