**章节导航：**
[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
- 笔记