分类 CSS 下的文章

需求：有一个嵌入iframe的网页，在右半边显示，但是右侧是自适应宽高的，直接设置iframe: width:100%; height:100%可以实现这个自适应父元素的功能，但是却出现了，原来的网页太大只能显示局部，那么能不能实现自适应父元素的宽高的前提下，仍能缩小一下页面的比例呢？

- 阅读剩余部分 -

border-raduis

有两种写法：

第一种；

/*单值写法(简写)，会被解释为 top-left | top-right | bottom-right | bottom-left*/
border-raduis: 20px
/*类似于margin的简写化，顺时针*/
border-raduis: 20% 10%;

第二种：

/*加斜杠的写法，八个值(斜杠前4个值，后4个值)*/
border-raduis: 20% / 10%;

重点就在第二种写法：

它表示的是椭圆，斜杠前是椭圆的长半轴，斜杠后是椭圆的短半轴

例如：

border-raduis: 50% 50% 50% 50% / 10% 50% 50% 50%;

这里表示的就是，左上角的圆是斜杠前第一个50%(充当长半轴)，和斜杠后第一个50%(充当短半轴)，四个角的每个圆角都是这样一一配对而成的

效果如图:

demo

border-radius MDN