标签：CSS3 box background 100px 设置 10px shadow 0px
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：设置图片位置
标签：CSS3,box,background,100px,设置,10px,shadow,0px 来源： https://blog.csdn.net/weixin_55508765/article/details/118423799
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。