css3 border-radius、box-shadow

1、border-radius

border-radius: 50px/30px;
border-radius: 50px/50px;
border-radius: 50px;
border-radius: 250px 140px 110px 130px/120px 140px 130px 120px;
自己找找感觉吧!
第一个数是x轴的宽度
第二个数是y轴的宽度
两个数用/隔开
在这里插入图片描述
举例:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
        div {
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
        }
		.box1 {
            width: 200px;
            height: 200px;
            border: 1px solid #000000;
            border-radius: 50px/30px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            border: 1px solid #000000;
            border-radius: 50px/50px;
        }
        .box3 {
            width: 200px;
            height: 200px;
            border: 1px solid #000000;
            border-radius: 100px/100px;
        }
        .box4 {
            width: 300px;
            height: 200px;
            border: 1px solid #000000;
            border-radius: 50px;
        }
        .box5 {
            width: 500px;
            height: 300px;
            border: 1px solid #000000;
            border-radius: 250px 140px 110px 130px/120px 140px 130px 120px;
        }

在这里插入图片描述

2、box-shadow

box-shadow: 1px 1px 1px 1px rgba(0,0,0,.5);
这么理解,每一个div后面都有一个影子
第一个参数是这个影子x轴方向的偏移
第二个参数是y轴方向的偏移
第三个参数是这个影子的模糊程度
第四个参数是这个影子的扩散大小,1px正好出来一点
最后一个参数是这个影子的rgba颜色和透明度

<div class="box"></div>
     .box {
          width: 200px;
          height: 200px;
          box-shadow: 1px 1px 1px 1px rgba(0,0,0,.5);
      }

猜你喜欢

转载自blog.csdn.net/Cheny_Yang/article/details/84944636