Web前端篇：css背景属性和边框属性 - 好文

* 背景属性值
属性值属性值描述
background-color d单侧颜色法，RGB，十六进制 s设置元素的背景颜色
background-image url(“wy.png”) 给一个元素设置一个或多个背景图像
background-position top,left,center,百分比，px 为每一个背景图片设置初始位置
background-repreat repeat-x repeat-y
* background-image设置背景图片 <!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <title>Title</title> <style> .bg{ width: 400px; height: 400px;
border:1px solid blue; background-image:url("wy.jpg") } </style> </head> <body>
<div class="bg"></div> </body> </html>
*
background-repeat背景图像

* 属性值：
数值值描述
repeat 默认值。表示背景图水平和垂直方向都平铺
no-repeat 表示背景图水平和处置方向都不平铺
repeat-x 表示背景图只有水平方向上平铺
repeat-y 表示背景图只有垂直方向上平铺
点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>
.bg{ width: 1000px; height: 1000px; border:1px solid blue;
background-image:url("sj6.jpg"); background-repeat:repeat-x;/*沿着轴方向平铺*/ }
*
bacground-position背景图定位

*
语法：
background-position:x y; background-position:position position
*
取值
关键字取值： top ,right,bottom,left,center 长度值取值： px,em 百分比： 50%
*
示例
background-position:0 0; /*左上角显示*/ background-position:top right; /*背景图像在右上角*/
background-position:top center; /*背景图像上方居中显示*/ background-position:center
center;/*背景图像居中显示*/
* 设置长度单位：

background-position:50px 100px;
* 设置为负值： background-position:-20px -30px;
<>2.雪碧图

* CSS雪碧图技术：即CSS
Sprite,也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>

* 优点：
* 有效的减少HTTP请求数量
* 加速内容
* 雪碧图的实现原理
* 它通过css的背景属性的backrground-position的来控制雪碧图的显示。
* 控制一个层，可显示的区域范围大消息，通过一个窗口，进行背景图的移动。
<>3.border-radius

* 传统的圆角生成方案，必须使用多张图片作为背景图案。css3的出现，使得我们再也不必浪费时间去制作这些图片，并且还有其他多个优点：
* 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。
* 提高网页性能。由于不必再发出多条的HTTP请求，网页的载入速度将变快
* 增加视觉可靠性。（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。 <!DOCTYPE
html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<style> .bor-radius{ width: 400px; height: 400px; border-radius:20px;
background-color: red; } </style> </head> <body> <div class="bor-radius"></div>
</body> </html>
*
显示效果如下：

*
单角设置：

*
border-top-left-radius

*
border-top-right-radius

*
border-bottom-right-radius

*
border-bottom-left-radius

*
示例：
border-bottom-left-radius：

*
border-radius效果实现一个无边框圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> <style> .cicle{ width: 200px; height: 200px;
background-color: red; border-radius:50%; } </style> </head> <body> <div
class="cicle"></div> </body> </html>
*
制作一半的圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> <style> .cicle{ width: 200px; height: 100px;
background-color: red; border-top-left-radius: 100px; border-top-right-radius:
100px; } </style> </head> <body> <div class="cicle"></div> </body> </html>

点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>

<>4.盒子阴影

*
通过box-shadow属性设置元素的阴影

*
语法：
box-shadow: h-shadow v-shadow blur color inset;
值描述
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。 .bg{ width: 400px; height: 400px; border:1px
solid blue; background-image:url("sj6.jpg"); background-repeat:no-repeat;
background-position:50px 100px; box-shadow:5px 5px 20px red; }
<>6.网页中规范和错误问题

* css命名规范：
点击领取免费资料及课程 <https://jq.qq.com/?_wv=1027&k=5s2wUxY>

*
项目目录规范：

*
确定错误位置

* 假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。这样我们可以更精准的找到错误点，进行排错。
*
是否重设了默认的样式?

* 制作网页时，我们要清除掉默认的元素的padding和margin，使得我们更易去计算盒模型的大小。

热门工具换一换