关于定位与圆角算法
来源：2-1 汉克狗头部轮廓和耳朵
此处留白
2019-04-20 13:25:18
.forehead{
width: 102px;
height: 48px;
background: var(--bg);
top: 20px;
left: 50%;
transform: translate(-50%,0);
/*margin-left: -51px;*/
border-radius: 51px / 40px 40px 8px 8px;
}
请问老师
1、这里的 transform 移动定位 与 margin-left 定位有什么区别之处吗？
2、border-radius: 51px / 40px 40px 8px 8px; 这里的圆角算法的表达式在学习圆角的时候没提到过，请问这个是怎么计算的呢？
1回答
-
同学，你好。
1、transform（x，y）是2D转换，可以通过改变x，y的值改变自身的问题，通常用来结合动画使用。而margin、padding是填充，通过填充空间改变自己的位置，是属于盒子模型的范畴。但是实际上这两种方式在一定程度上都可以实现一个元素的简单位置改变，只要能实现我们想要的效果都可以使用。
2、border-radius的语法是：border-radius: 1-4 length|% / 1-4 length|%;
什么意思呢，就是/前后有1-4个参数，这个参数可以为具体的px值，也可以是百分比的值。
并且这四个值需要注意的是：
1、第一个值（/前面的值）为 x 轴方向的半径 (radius)，第二个值（/后面的值）为 y 轴 半径
2、每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
3、如果只有一个值的话，就表示x轴和y轴方向都是一样的，比如border-radius：50%；四个角的弧度都是一样的。
举个例子：border-radius:10px 20px 30px/40px 70px 60px;
意思是 水平半径方向上 垂直方向上
左上角 border-top-left 10px 40px
右上角 border-top-right 20px 70px
左下角 border-bottom-left 20px 70px
右下角 border-bottom-right 30xp 60px
如果帮助到了你，欢迎采纳！
祝学习愉快！
1
相似问题