1. 程式人生 > >css3 border-radius、box-shadow

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);
      }