**章節導航:**
[TOC]
*****
> ## :-: border-radius (圓角)
```css
border-radius: 50%;
/* 一個角可以設置兩個弧度,垂直/水平 */
border-top-left-radius: 10px 10px;
border-top-right-radius: 20px 20px;
border-bottom-left-radius: 30px 30px;
border-bottom-right-radius: 40px 40px;
/* 簡寫形式,水平方向的 top-left top-right bootom-right bootom-left / 對應垂直方向的邊角 */
border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
```
> ## :-: box-shadow (陰影)
```css
/* transparent 透明色 */
background-color: transparent;
/* 寫inset表示內陰影、不寫inset就是外陰影 */
/*
inset -- 寫inset表示內陰影、不寫inset就是外陰影、
參數1:水平偏移量、1px
參數2:垂直偏移量、2px
參數3:陰影(高斯模糊)程度、3px (基于邊框兩邊的位置,同時向兩側展開模糊)
參數4:水平豎直范圍擴大 、0px
*/
box-shadow: inset 1px 2px 3px 0px #000;
/* 同時設置內外陰影, */
box-shadow: 1px 2px 3px 0px #000, inset 1px 2px 3px 0px #fff;
/* 或者獨立設置多個值、 */
box-shadow: inset 0px 0px 10px #fff,
3px 0px 10px #f0f,
0px -3px 10px #0ff,
-3px 0px 10px #00f,
0px 3px 10px #ff0;
```
> ## :-: <a href="http://a-1.vip/demo/transition/demo.html">動圖 - Demo</a>
```css
.demo {
/* border: 1px solid red; */
position: absolute;
border-radius: 5px;
left: calc(50% - 50px);
top: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: #fff;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5);
/* 狀態被改變的動圖效果 */
transition: all 2.6s;
opacity: 0;
}
.demo::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 30px rgba(0, 0, 0, 6);
opacity: 0;
transition: all 1.6s;
}
.demo:hover {
/* 整體放大的倍數 */
transform: scale(3.65, 3.65);
opacity: 1;
}
.demo::after:hover {
opacity: 1;
}
```
> ## :-: border-image 邊框背景
```css
/* 引入圖片進行填充 */
border-image-source: url('./src/image.png');
/* 設置漸變色進行填充 */
border-image-source: linear-gradient(red, #ccc);
/* 截取:1~4個參數、區域分割 單位:可以填%,但不能帶px,上\右\下\左 */
border-image-slice: 100;
/* 不加fill只填充邊框部分,加了fill 就會填充整個背景 */
border-image-slice: 10 20 30 40 fill;
/* 向外延伸的程度,不常用 */
border-image-outset: 100px;
border-image-width: 50px;
/* 重復 */
border-image-repeat: repeat;
```
> ## :-: background 背景系列
```css
div.box123 {
width: 500px;
height: 500px;
position: absolute;
/* 水平劇中 */
left: calc(50% - 250px);
/* 垂直劇中 */
top: calc(50% - 250px);
background-color: red;
/* 引入圖片背景 (可以引入多個圖片) */
background-image: url(), url();
/* 分別設置兩張圖片的大小 */
background-size: 100px 100px, 200px 200px;
/* 不重復 */
background-repeat: no-repeat;
/* 分別設置位置 */
background-position: 0 0, 100px 0;
background-image: radial-gradient(#fff, #000);
/* 漸變顏色生成器 linear-gradient()、radial-gradient() */
/* */
border: 20px solid transparent;
padding: 20px;
background-image: url('./img.png');
/* 規定背景從盒子的某個部分 開始 渲染(padding-box、border-box、content-box、text) 默認值是padding-box */
background-origin: content-box;
/* 規定背景從盒子的某個部分 結束 渲染(padding-box、border-box、content-box、text) 默認值是border-box text就是用文字體的內容區域來渲染 類似于彩色字體 */
background-clip: content-box;
/* background-repeat可以設置圖片的排班方式、可以填兩個參數、效果:是否重復、拉伸、間隙、補齊 */
background-repeat: space round;
/* background-position定位是基于background-origin的屬性值 */
background-position: 0px 0px;
/* 超出部分滾動條展示 */
overflow: scroll;
/* background-attachment
設置相對于盒子的某個區域進行定位 默認值scroll(相對于容器定位) */
/* local -- 相對于內容定位(滾動條位置改變時,背景圖緊貼著文本內容) */
/* fixed -- 可以使背景在瀏覽器窗口可視區,位置保持懸浮 */
background-attachment: local;
/* background-size
設置背景圖的大小 */
/* contain -- 在不改變圖片比例的情況下、讓背景圖跟容器剛好容納(100%)。有一條邊會朝內留空 */
/* cover -- 在不改變圖片比例的情況下、讓背景圖跟容器剛好容納(100%)。有一條邊會朝外溢出(推薦) */
/* 100% -- 拉伸背景圖跟容器大小一致、會改變圖像比例 */
background-size: cover;
/* 漸變顏色生成器 linear-gradient()、radial-gradient() */
/* 線性漸變 linear-gradient() */
/* 參數1可空:需要漸變的方向、默認 to bottom (向右下漸變:to right bottom ) */
/* 參數1還可以寫角度:如90deg、0deg、180deg、135deg */
/* 參數2以后:漸變顏色color 20px是該顏色的起至位置 */
background-color: linear-gradient(to left, #f40 20px, #626);
/* 徑向漸變 radial-gradient() */
/* 參數1可空:設置漸變的圓及圓心點、(圓形 點在左上:circle at left top)
closest-corner
closest-side
farthest-corner
farthest-side */
/* 參數2以后:漸變顏色color 20%是該顏色起至大小 */
background-color: radial-gradient(ellipse at 5px 5px, #000 20%, #fff 40px, red);
}
/* ----------------------------------------- Demo ----------------------------------------- */
div.box {
width: 600px;
height: 100px;
line-height: 100px;
position: absolute;
left: calc(50% - 300px);
top: calc(50% - 50px);
font-size: 60px;
font-weight: 800;
/* */
background-image: url('./src/image.jpg'), url('./src/image.jpg');
background-position: center center, 0 0;
/* chrome特有屬性、制作背景字體 */
-webkit-background-clip: text, padding-box;
-webkit-text-fill-color: transparent;
transition: all 2.3s;
}
div.box:hover {
background-position: 0 0, center center;
}
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request