border-radius： 圆角 复合四个值 被圆切割
值为50% 是圆形 --- 二个值 第一个值代表左上右下 第二个值代表右上左下
三个值 1 左上 2 右上左下 3 右下
四个值 1 左上 2 右上 3 右下 4 左下
border-top-left-radius: 10px;上左
border-top-right-radius: 10px;上右
border-bottom-left-radius: 10px;下左
border-bottom-right-radius: 10px;下右
border-top-left-radius: 100px 100px; 为100px的正方形设置得到一个扇形半圆用一个长方形设置
box-shadow 设置内外阴影
设置的阴影在背景上 文字下
且有四个值
第一个值代表水平偏移量 左右移动
第二个值代表垂直偏移量 上下移动
第三个值是阴影大小 blur 高斯模糊 基于原来边框位置向边框二边模糊 值越大越模糊
第四个是可选配置为扩散范围 扩大的是基于原来的大小四边同时增加
box-shadow: inset 0px 0px 10px 10px #f00; 设置内阴影 只显示在内部
box-shadow: 0px 0px 10px 10px #f00; 设置外阴影
可以同时设置多个值
box-shadow: 10px 0px 10px 0px #f0f,
-10px 0px 10px #ff0,
0px -10px 10px #00f,
0px 10px 10px #f00;
box-shadow: inset 0px 0px 80px #fff,
inset 10px 0px 80px #f0f,
inset -10px 0px 80px #0ff,
inset -10px 0px 80px #f0f,
inset 10px 0px #0ff,
0px 0px 30px #fff,
-10px 0px 80px #f0f,
10px 0px 80px #0ff;
box-shadow: 0px 0px 100px 50px #fff,
0px 0px 300px 50px #ff0;
调试模糊值可以实现
background-image ：url（）
: url（）,url（） 资源 可以有二个图片地址 第一个渲染失败会渲染第二个
：linear-gradient（#，#）渐变颜色当做资源
可以设置颜色 （#fff 20px，#fof 100px）
可以设置角度 起始方向（90deg，#fff 20px，#fof 100px）
background-size：设置图片大小
：100px 100px，100px 200px；设置二个背景图片位置
：cover；一张图片填充容器 不会改变图片比列
：contain；一张图片填充容器 一边对齐 另一条变变小
background-origin：
设置背景起始位置
- ：border-box；border开始
- ：padding-box；默认padding开始
- ：content-box；内容区开始
background-clip：跟origin配合使用
设置背景结束位置
- ：padding-box；默认padding结束
- ：content-box；内容区结束
- ：text 设置背景图片在文字外截断 只显示在文字内部 -webkit-独有属性
-webkit-background-clip：text；
-webkit-text-fill-color：transparent；设置文字颜色为透明色
二个属性搭配使用
background-attachment：改变图片位置
- ：coroll；默认 固定在容器中
- ：local；相对于内容区定位 跟内容相对固定
- ：fixed；相对于视口定位 固定在可视区 超出容器的话会消失
background-repeat：
- ：repeat-X；X轴平铺
- ：space；不拉伸图片
- ：round；平铺 会改变宽度 不改变高度
- ：no-repeat；一张图片
background-position：设置图片位置