<h4>背景属性</h4> 讯享网
背景颜色
背景颜色这样设置：
讯享网
默认是透明的（transparent），可以通过设置颜色的方式修改
背景图片
背景图片就更好设置了：
讯享网
那有人就要问了
这和image有什么区别？
问得好，比image更方便控制位置（图片在盒子中的位置）
tips：
1. url 不要遗漏
2. url 可以是绝对路径, 也可以是相对路径
3. url 上可以加引号, 也可以不加
背景平铺
讯享网
我们可以给背景加颜色
这是一些可取的值：
repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺
小的图比较明显
默认是repeat，背景颜色和背景颜色可以同时出现 ，背景图片在背景色上面
背景位置
可以给背景设置位置：
参数有三种风格：
1. 方位名词: (top, left, right, bottom)
2. 精确单位: 坐标或者百分比(以左上角为原点)
3. 混合单位: 同时包含方位名词和精确单位
tips：
如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中
如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂 直居中)
梦回当年里牛渴死设计的时候，进程线程管道通信，你发它不收，谁阻塞谁轮询谁等待
计算机平面坐标系长这样：
背景尺寸
没错可设置背景尺寸：
讯享网
可以填具体的数值，如 40px 60px 表示宽度为 40px, 高度为 60px
可填百分比：按照父元素的尺寸设置
cover：把背景图像扩展到足够大，以使背景图完全覆盖背景区域（但是背景图像的某些部分也许没办法显示在背景定位区域中）
contain：把图像图像扩展成最大尺寸，以致宽度和高度完全适应内容区域
举个例子吧，这是contain：
这是cover：
圆角矩形
可以通过border-radius使边框带圆角效果
基本用法
就是想要让尖角变圆滑这样就好看了
比如小智桌面，比如纸鹿学长的网站：
圆圆的就是很好看，加上毛玻璃就会变高级。。。
length是内切圆半径，数值越大，弧线越强烈
可爱捏：
生成圆形
让border-radius的值为正方形宽度的一半即可：
讯享网
也可以不写数值，直接用50%来表示
生成圆角矩形
生成圆角矩形捏就是让border-radius的值为矩形高度的一半：
像个蹲便
展开写法
border-radius是一个复合写法，可以针对四个角分别设置
讯享网
这两种写法是等价的
这也等价（按照顺时针排列）
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/151393.html