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

前端大叔熟 2019年06月20日

背景属性值

属性值	属性值	描述
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	表示背景图只有垂直方向上平铺

点击领取免费资料及课程

.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的背景定位来显示需要显示的图片部分。

点击领取免费资料及课程

优点：
- 有效的减少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>

点击领取免费资料及课程

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命名规范：

点击领取免费资料及课程

项目目录规范：
确定错误位置
- 假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。这样我们可以更精准的找到错误点，进行排错。
是否重设了默认的样式?
- 制作网页时，我们要清除掉默认的元素的padding和margin，使得我们更易去计算盒模型的大小。

HTML教程 HTML5教程 HTML参考手册 HTML字符集 HTML标签 HTMLDOM教程 CSS教程 CSS3教程 Bootstrap3教程 Bootstrap4教程 FontAwesome图标 Foundation5教程 CSS参考手册 JavaScript教程 JavaScript对象 HTMLDOM对象 jQuery教程 JSON教程 AngularJS教程 Angular2教程 Vue.js教程 React教程 jQueryUI教程 jQueryEasyUI教程 AJAX教程 Highcharts教程 GoogleMapsAPI教程 ES6教程 TypeScript教程 ES6标准入门 PHP教程设计模式正则表达式-教程 WebServices教程 Python2教程 Python3教程 Django教程 NumPy教程 ASP.NET教程 C#教程 Ruby教程 Go语言教程 Java教程 Servlet教程 JSP教程 Maven教程 Node.js教程 C语言教程 C++教程 Perl教程 Lua教程 Scala教程 ASP教程 VBScript教程 Linux教程 Docker教程 SQL教程 MySQL教程 SQLite教程 MongoDB教程 Redis教程 Memcached教程 ADO教程 Android教程 Swift教程 jQueryMobile教程 ionic教程 Kotlin教程 XML教程 DTD教程 XMLDOM教程 XSLT教程 XPath教程 XQuery教程 XLink教程 XMLSchema教程 XSL-FO教程 SVG教程 SOAP教程 RDF教程 WSDL教程 RSS教程 AppML教程 Eclipse教程 Git教程 SVN教程 Firebug教程 HTTP教程网站建设指南浏览器信息网站主机教程 TCP/IP教程 W3C教程网站品质教程