圆角、怪异盒模型


圆角

可以设置像素以及百分比。

分开写法:

设置左上角: border-top-left-radius
设置右上角:border-top-right-radius
设置右下角:border-bottom-right-radius
设置左下角:border-bottom-left-radius
可以设置两个值:
例如: border-top-left-radius: x y;
x代表左上角X轴偏移量,y代表左上角Y轴偏移量。

复合写法:border-radius

  • border-radius: 50%;一个值得情况,表示左上角,右上角,右下角,左下角都是这个值;
  • border-radius: 50% 50%;两个值的情况,第一个表示左上角和右下角,第二个值表示右上角和左下角;
  • border-radius: 20px 50% 30px;三个值的情况,第一值表示左上角,第二个值表示右上角和左下角,第三个值表示右下角;
  • border-radius: 20px 20px 30px 10px; 四个值的情况,第一个值表示左上角,第二个值表示右上角,第三个值表示右下角,第四个值表示左下角。
  • border-radius: 20px 20px 30px 10px / 10px 20px 30px 10px; 代表border-radius:四个方向的X轴偏移 / 四个方向的宇宙偏移量;

怪异盒模型

box-sizing: content-box;
保持内容尺寸,类似标准盒模型
box-sizing: border-box;
怪异盒模型,border与padding不会影响盒子的尺寸,但会影响内容尺寸

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 5,585评论 0 7
  • 1.CSS简介 Cascading Style Sheet 层叠样式表 主要用来定义页面中的表现,HTML 描述页...
    hyt222阅读 4,432评论 0 0
  • 大家都知道border-radius使用来设置边角的但是如何去设置呢,下面我会一一介绍 border-radius...
    likeli阅读 4,531评论 0 0
  • 半个月前我从一个城市过度到另一个城市,半个月后,我又从另一个城市过度到别的城市,这个月里,我独自在三个城市徘...
    Silvia七喵阅读 3,499评论 0 2
  • 你希望拥有20个知心朋友还是希望拥有2000个普通朋友? 这个问题的答案,应该有大面积的倾向。选择前者的会比后者多...
    茉莉大大阅读 2,271评论 0 0

友情链接更多精彩内容