写点什么

CSS 页面设计稿构思与实现(五)之 border-radius

作者:Augus
  • 2021 年 11 月 13 日
  • 本文字数:517 字

    阅读完需:约 2 分钟

CSS页面设计稿构思与实现(五)之border-radius

前言

在 CSS 中 border-radius 这个属性想必你肯定是不陌生的,通过这个属性你可以设置元素的外边框圆角,从而实现你想要的各种(椭)圆,一个半径确定一个圆形,两个半径时确定一个椭圆,而我们平时所需要达到各种圆角效果,就是通过(椭)圆与边框的交集形成的圆角效果。

border-radius

  • 我们先来看一张图



  • 如图,这个矩形有四个不同圆角,每个圆角都由不同的尺寸构成,那每个圆角的构成,都是通过不同的水平和垂直的半径生成的。

  • 然后我们看一下生成这个圆形的代码。



  • border-radius:可以理解为由两组属性构成,第一组是水平上的尺寸,第二组则是垂直方向上的尺寸,通过下划线(/)隔开。而方向依次对应这左上右上右下左下。

  • 但是在我们的平常开发中,他的属性都是简写的形式。


border-radius: 1em;
/* 等价于: */
border-top-left-radius: 1em;border-top-right-radius: 1em;border-bottom-right-radius: 1em;border-bottom-left-radius: 1em;
复制代码


border-radius: 1em/5em;
/* 等价于: */
border-top-left-radius: 1em 5em;border-top-right-radius: 1em 5em;border-bottom-right-radius: 1em 5em;border-bottom-left-radius: 1em 5em;
复制代码


好,今天就到这里了,今天努力的你依然是最棒的。Bye Bye!!!

用户头像

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

评论

发布
暂无评论
CSS页面设计稿构思与实现(五)之border-radius