# 3.border和background - border-radius border-radius:上左 上右 下右 下左 border-radius:上左下右 上右下左 border-radius:上左 上右下左 下右 border-top-left-radius:10px 10px; bor ...
# 3.border和background
- border-radius border-radius:上左 上右 下右 下左 border-radius:上左下右 上右下左 border-radius:上左 上右下左 下右
border-top-left-radius:10px 10px; border-top-right-radius:10px 10px; border-bottom-right-radius:10px 10px; border-bottom-left-radius:10px 10px;
特殊寫法： border-radius:10px 20px 30px 40px / 10px 20px 30px 40px; 前面對應水平，後面對應垂直
- box-shadow 給盒子加上陰影，分為inset內陰影和outset外陰影
box-shadow:inset 0px 0px 0px 0px #fff; 不寫inset預設是outset 陰影的水平偏移量：正右負左 陰影的垂直偏移量：正下負上 陰影的模糊值：基於原來邊框的位置，向兩邊同時模糊的距離 陰影的擴大:向四個方向同時擴大的距離 陰影的顏色
可以寫多個： box-shadow:inset 0px 0px 10px #fff, 3px 0px 10px #ff0, 0px -3px 10px #f0f, -3px 0px 10px #0ff, 0px 3px 10px #00f;
練習： ```html <div></div>
<style> *{ margin:0; padding:0; } body{ background-color:#000; } //第一種效果 div{ position:absolute; left:calc(50% - 150px); top:calc(50% - 150px); width:300px; height:300px; border:1px solid #fff; border-radius:50%;
box-shadow:inset 0px 0px 50px #fff, inset 10px 0px 80px #f0f, inset -10px 0px 80px #0ff, inset 10px 0px 300px #f0f, inset -10px 0px 300px #0ff, 0px 0px 50px #fff, -10px 0px 80px #f0f, 10px 0px 80px #0ff; } //第二種效果 div{ position:absolute; left:calc(50% - 150px); top:calc(50% - 150px); width:300px; height:300px; border:1px solid #fff; border-radius:50%;
box-shadow:0px 0px 100px 50px #fff, 0px 0px 250px 125px #ff0; } //第三種效果 div{ position:absolute; border-radius:5px; left:calc(50% - 50px); top:calc(50% - 50px); width:100px; height:100px; background-color:#fff;
box-shadow: 0px 1px 2px rgba(0, 0, 0, .1); transition:all .5s; }
div::after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:5px; box-shadow:0px 5px 15px rgba(0, 0, 0, .3); opacity:0; transition:all .5s; }
div:hover{ transform:scale(1.25, 1); }
div:hover::after{ opacity:1; } </style> ```
- border-image //引入背景圖片 border-image-source:url(); //支持漸變色 border-image-source:linear-gradient(red, yellow); border-image-slice:10 10 10 10;//只能填數字或百分比，順序上右下左 border-image-width: border-image-outset: border-image-repeat:stretch | round | repeat | space;
速寫 border-image:source slice repeat; ```html <style> //邊框漸變色 div{ position:absolute; left:calc(50% - 50px); top:calc(50% - 50px); width:100px; height:100px; border:10px solid black; border-image-source:linear-gradient(red, yellow); border-image-slice:10; } </style> ```
- background background-image:url(), url();//可以放多張背景圖片 background-size:100px 200px, 100px 200px; background-repeat:no-repeat; background-position:0 0, 100px 0;
//下麵兩個一起使用 background-origin:border-box | padding-box | content-box;//背景圖片從哪裡開始 邊框盒 | 填充盒 | 內容盒
background-clip::border-box | padding-box | content-box | text;//背景圖片從哪裡結束 邊框盒 | 填充盒 | 內容盒 | 文字體部分 //上面兩個一起使用 ```html <style> div{ position:absolute; left:calc(50% - 200px); top:100px; height:100px; line-height:100px; font-size:80px; width:400px;
background-image:url();
//下麵兩個屬性配合使用，讓背景圖片填充到文字區域 -webkit-background-clip:text; background-clip:text; background-text-fill-color:transparent; text-fill-color:transparent; //上面兩個屬性配合使用 } </style> ```
background-attachment:scroll | local | fixed scroll相對於容器定位 local相對於容器內容定位 fixed相對於瀏覽器視口定位 ```html <style> div{ width:500px; height:700px; border:1px solid red; overflow:scroll; background-image:url(); background-size:300px 400px; background-repeat:no-repeat; background-position:100px 100px;
background-attachment:local; } </style> ```
background-size: cover | contain cover:等比例縮放，會超出容器 contain:被容器完整包含，等比例縮放，會留白
background-repeat:no-repeat;是否重覆出現
background-image:linear-gradient(to right bottom, #0f0 20px, #ff0 60px, #00f 80px);
background-image:radial-gradient(circle at 100px 0, #0f0 20px, green 40px, #0ff); 以上是markdown格式的筆記
