CSS3中的基础（圆角，边框背景，过渡）

最新推荐文章于 2024-04-02 23:04:53 发布

lik-7

最新推荐文章于 2024-04-02 23:04:53 发布

阅读量539

点赞数

分类专栏： HTML5 文章标签： python pandas 数据分析

本文链接：https://blog.csdn.net/m0_68169119/article/details/125909759

版权

一、border-radius圆角

在做网页的时候，常常需要实现圆角，以前的做法就是切图，现在就方便了，用css3里面的 border-radius 属性就可以直接实现。

border-radius 是一种缩写方法。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：

            /* 四个值：左上  右上  右下  左下 */

            /* border-radius:10px 10px 10px 10px; */

            /* 三个值：左上  右上和左下   右下 */

            /* border-radius: 10px 20px 40px; */

            /* 两个值：左上和右下   右上和左下*/

            /* border-radius: 20px 20px; */

            /* 一个值：四个圆角值相同 */

            /* 以椭圆为基础画出的圆角，方式

            border-radius:x半径/y半径 */

案列：

        .one {
          border-radius: 15px 50px 30px 5px;
          background: aqua;
          padding: 20px; 
          width: 200px;
          height: 150px; 
        }
        
       .two {
          border-radius: 15px 50px 30px;
          background: aqua;
          padding: 20px; 
          width: 200px;
          height: 150px; 
        }
        
        .three {
          border-radius: 15px 50px;
          background: aqua;
          padding: 20px; 
          width: 200px;
          height: 150px; 
        } 
        
        .four {
          border-radius: 15px;
          background: aqua;
          padding: 20px; 
          width: 200px;
          height: 150px; 
        } </