Web front-end articles: css property background and border properties

Background property value

Property Value	Property Value	description
background-color	Method d unilateral color, RGB, hexadecimal	s set the background color element
background-image	url(“wy.png”)	Is provided to an element or a plurality of background images
background-position	top, left, center, percentage, px	Set the initial position for each of the background image
background-repreat	repeat-x	repeat-y

background-image set the 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 background image

Property values:

Numerical values	description
repeat	The default value . Represents background tile both horizontal and vertical directions
no-repeat	A diagram showing the horizontal direction and disposal are not tiled background
repeat-x	It represents only background tile horizontally
repeat-y	Represents only background vertically tiled

Click to receive free information and courses

.bg{
    width: 1000px;
    height: 1000px;
    border:1px solid blue;
    background-image:url("sj6.jpg");
    background-repeat:repeat-x;/*沿着轴方向平铺*/
}

bacground-position positioning background

grammar:

background-position:x y;
background-position:position position

The value

关键字取值：
    top ,right,bottom,left,center
长度值取值：
    px,em
百分比：
    50%

Examples

background-position:0 0;
/*左上角显示*/

background-position:top right; /*背景图像在右上角*/

background-position:top center; /*背景图像上方居中显示*/

background-position:center center;/*背景图像居中显示*/

Setting the length unit:

background-position:50px 100px;

Is set to a negative value:

background-position:-20px -30px;

Figure 2. Sprite

Figure CSS Sprite technology: the CSS Sprite, was also called CSS sprite, it is an image mosaic technique. This method is the small icon and a plurality of background images merge to a picture, and then use to display the background image css positioning portion to be displayed.

Click to receive free information and courses

advantage:
- Effectively reducing the number of HTTP requests
- Accelerate content
The principle Sprite map
- It controls the display by sprite FIG backrground-position of the css background properties.
- A control layer, a large range area can display a message through a window, the background moves.

3.border-radius

Traditional fillet generation scheme, must be used more than one picture as a background pattern. css3 appears that we no longer have to waste time to make these pictures, and there are a number of other advantages:
- Reducing the maintenance workload. Generated image files, update, code your page, these jobs are no longer needed.
- Improve page performance. No longer having a plurality of HTTP request, the page load speed faster
- Increase the reliability of vision. (Network congestion, server error, speed is too slow, etc.), the background image will download failed, leading to poor visual effects. CSS3 will not happen.

<!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>

Display as follows:
Single angle setting:
- 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，使得我们更易去计算盒模型的大小。

Web front-end articles: css property background and border properties

Figure 2. Sprite

3.border-radius

4.盒子阴影

6.网页中规范和错误问题

Guess you like