前端之背景与边框

渐变、背景图像和圆角，背景和边框的巧妙运用。

背景

背景颜色

background-color属性定义了CSS中任何元素的背景颜色。元素的内容和内边距。

<style>
/* Background Colors  范围：内容和内边距
-------------------------------------------------- */

.box {
    background-color: #567895;
    border: 3px solid black;
    padding: 10px;
}

.box h2 {
    color: white;
    background-color: black;
}

.box span {
    color: yellow;
    background-color: black;
}
</style>

    <div class="box">
        <h2>Background Colors</h2>
        <p>Try changing the background <span>colors</span>.</p>
    </div>

背景图片

background-image
小图则是平铺以填充方框。——background-repeat
大图不会缩小以适应，只显示一部分。——background-size
背景图像将显示在背景颜色的顶部

<style>
body {
    background-image: url('../images/little-bg.png');
}
</style>

<style>
body {
    background-image: url('../images/little-bg.png');
    background-color: black;
}
</style>

背景平铺

<style>

body {
    background-image: url('../images/little-bg.png');
    background-color: black;
    background-repeat: no-repeat;
}
</style>

图片大小

background-size
用数值设置

或

cover 使图像足够大，保持其高宽比的情况下完全覆盖。可能会跳出盒子外。保持比例拉伸。
contain 使图像的大小适合盒子内。图的长宽比与盒子的长宽比不同，可能在图像的任何一边出现间隙。

原图：

<style>
body {
    background-image: url('../images/big-bg.jpg');
    background-color: black;
    background-repeat: no-repeat;
}
</style>

<style>
body {
    background-image: url('../images/big-bg.jpg');
    background-color: black;
    background-size: cover;
}
</style>

---

<style>
body {
    background-image: url('../images/big-bg.jpg');
    background-color: black;
    background-size: contain
}
</style>

背景图像定位

background-position使用方式：

<style>
	background-attachment: fixed;
    background-position: 100px 100px;
</style>

有点无语。。。

默认的背景位置值是(0,0)，也就是左上角。

背景图片建议配套方式：（大小铺满 不重复）

<style>
body {
    background-image: url('../images/big-bg.jpg');
    background-color: black;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    /* background-position: 0 0; */
}
</style>

但是当宽度缩小时，背景图片出现了变形。
建议在加上

<style>
       /* 页面缩小时， 背景图片上下，左右居中*/
       background-position-x: center;
       background-position-y: center;
</style>

去掉：

<style>
    background-repeat: no-repeat;
</style>

改：

<style>
    background-size: cover;
</style>

渐变背景

渐变背景用CSS Gradient生成，然后复制代码。

<style>
body {
    background: rgb(255, 11, 0);
    background: linear-gradient(90deg, rgba(255, 11, 0, 1) 0%, rgba(0, 242, 255, 1) 0%, rgba(0, 30, 255, 1) 50%, rgba(14, 0, 255, 1) 100%, rgba(0, 212, 255, 1) 1000%, rgba(9, 9, 121, 1) 1000%);
}
</style>

多个背景图像

<style>
body {
    background-image: url('../images/little-bg.png'), url('../images/firefox1.png');
}
</style>

第一个url在第一层，第二个url在 第二层。

<style>
    background-image: url('../images/little-bg.png'), url('../images/firefox1.png');
    background-repeat: repeat-x, repeat-y;
</style>

background-image 和 background-repeat:一一对应。

边框

边框的 宽 样式 颜色
边框某部分的 宽 样式 颜色

混合边框：

<style>
{border-style: dotted dashed solid double;}
</style>

圆角

border-radius样例

<style>
.box2 {
    color: red;
    padding: .5em;
    border-style: dashed dotted double groove;
    border-color: red;
    border-width: .5em;
    border-radius: 10% 30%;
    background-color: black;
}
</style>

<div class="box2">
    <h2>Borders</h2>
    <p>Try changing the <span>span>borders</span>.</p>
</div>

推荐背景图片设置

<style>
	body {
            background-image: url('路径');
            background-color: black;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            background-position: center;
        }
</style>

效果：
宽屏

窄频

手机屏

背景图片设置的事，终于让我踏实了。

网页实例
下一节：前端之书写模式