前端练习九：背景与边框示例

1.background-clip：用于规定背景的绘制区域。

background-clip的取值范围：

border-box背景被裁剪到边框盒，默认值。
padding-box背景被裁剪到内边距框
content-box背景被裁剪到内容框

示例，注意比较三种属性值的不同效果；使用背景色或背景图片，是一样的效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            div {
                padding: 25px;
                border: 10px dotted #000000;
                background-color: yellow;
                /*background-image: url("smile.jpeg");*/
                
                /*background-clip: border-box;*/
                /*background-clip: padding-box;*/
                background-clip: content-box;
            }
        </style>
    </head>
    <body>
        <div>
            Three things in life when gone never come back: time, opportunity, and words.
        </div>
    </body>
</html>

当background-clip为padding-box和content-box时，不区分背景repeat和no-repeat。

当background-clip 为默认格式border-box时，border-right和border-bottum始终是背景图；

但border-top和border-left会因为no-repeat和repeat不同而不同：

当背景为repeat时，也是背景图，但背景图是从新铺的；

当背景为no-repeat时，border-top和border-left是背景色。

示例，注意no-repeat和repeat的比较：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            div {
                width: 300px;
                height: 300px;
                border: 10px dotted #000000;
                padding: 25px;    
                color: #fff;
                margin: 30px;
                /*background: yellow url("smile.jpeg") 0 0 repeat;*/
                background: yellow url("smile.jpeg") 0 0 no-repeat;

                background-clip: border-box;
            }
        </style>
    </head>
    <body>
        <div>
            Three things in life when gone never come back: time, opportunity, and words.
        </div>
    </body>
</html>

2.background-clip应用之半透明框：

background-clip设置为 padding-box或content-box属性，border设置为透明：即半透明边框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            body {
                background: url("smile.jpeg");
            }
            div {
                width: 300px;
                padding: 25px;    
                margin: 30px;

                background-color: #FFF;
                border: 10px solid rgba(255,255,255,.5);
                background-clip: padding-box;
            }
        </style>
    </head>
    <body>
        <div>
            Three things in life when gone never come back: time, opportunity, and words.
        </div>
    </body>
</html>

3.背景原点：background-origin ：决定图片的原始起始位置

background-origin的取值范围：
border-box背景图像相对于边框盒来定位
padding-box背景图像相对于内边距框来定位
content-box背景图像相对于内容框来定位

一个元素包含三个矩形，一个是 content 矩形，一个是 content + padding 矩形，还有一个是 content + padding + border 矩形。background-origin 用于设置背景图相对于哪个矩形进行定位，默认是 padding-box，为了实现背景图与内边距一致的效果，可将默认值更改为 content-box。

示例：　　

        <style type="text/css">
            div {
              width: 240px;
              height: 160px;
              padding: 20px;
              margin: 32px auto;
              box-sizing: border-box;
              
              background: url("smile.jpeg") no-repeat bottom right #58a;
              background-origin: content-box;
            }
        </style>

类似于background-position

4.背景尺寸：background-size ：设置背景图的大小

background-size的取值范围：length/percentage/auto/cover/contain

length：长度值指定,代为px，接受两个数值如：background-size:400px 400px;，分别为宽、高，也可以设定一个数值，当只有一个数值是，背景长度为此数值，高度等比例伸缩。
percentage：按背景图的百分比进行伸缩，也可以接受两个或者一个数值如：background-size:100% 100%;
auto：真实大小如：background-size:auto;
cover：等比缩放到完全覆盖容器，背景图像有可能超出容器如：background-size:cover;
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内如：background-size:contain;

5.渐变背景

线性渐变：linear-gradient

径向渐变： radial-gradient

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            div{
                height: 100px;
                width: 100px;
                background: -webkit-gradient(linear,left center,right center,from(yellow),color-stop(0.5,black),color-stop(0.5,#fff),to(blue));
            }
        </style>
    </head>
<body>
    <div></div>
</body>
</html>

6.多重边框：

绘制多重边框有两种方法。第一种是使用 box-shadow ,第二种是 outline。

box-shadow 前三个参数指定为 0，第四个参数指定为要模拟的边框宽度，第五个参数指定为要模拟的边框颜色，就可以实现一个边框效果。由于 box-shadow 可以以逗号分隔指定多个值，所以可以为元素添加任意多个边框。这种方法的优点是可以设置多个边框而且可以保持元素的圆角。缺点是不能响应元素的点击或其它事件。如果响应事件对你非常重要，那么可以启用 box-shadow 的 inset 关键字，然后再为元素设置一个 padding 即可。

outline 的行为和 border 几乎是相同的，不过不支持圆角（Firefox 支持 outline-radius）。借助 outline-offset 属性可以设置相对元素的距离，设置为负值时边框将显示在元素内部。相比于 box-shadow，这种方法的优点是支持边框非实线（可以设置为虚线）,缺点是只能设置一个外边框。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            div {
                width: 220px;
                height: 160px;
                margin: 32px auto;

                background-color: #000;
                border-radius: 8px;
                outline: 1px dashed #fff;
                outline-offset: -12px;
            }
        </style>
    </head>
<body>
    <div></div>
</body>
</html>

7.背景定位：background-position ：设置背景图像的起始位置

background-position取值范围：

示例1:

background-position 可以用 right 10px 这种形式为背景设置距离容器的右边距。

在 background 中仍然书写了 right bottom 关键字，主要是为不支持上述写法的浏览器提供一个回退方案。

        <style type="text/css">
            div {
                width: 220px;
                height: 160px;
                margin: 32px auto;

                background: url("smile.jpeg") no-repeat bottom right #58a;
                background-position: right 20px bottom 10px;
            }
        </style>

8.边框内圆角：

利用 box-shadow 和 outline 可以实现这个效果，box-shadow 第四个参数用于设置扩张半径，可保持元素的圆角，outline可以设置边框，但是无法保持圆角。但是这二者一重叠，就可以将元素和 outline 之间的空白填补上。

box-shadow 第四个参数扩张半径的设置是有讲究的，在元素圆角处将圆形描述出来，就不难发现，圆心到外边框的距离为 √ (radius ^ 2 + radius ^2)，所以 box-shadow 扩展半径要大于 (√ 2 - 1) * radius, 小于 (√ 2 - 1) * radius + outline 边框宽度。

        <style type="text/css">
            div {
              width: 240px;
              height: 160px;
              margin: 32px auto;
              
              background: tan;
              outline: .6em solid #655;
              border-radius: .8em;
              box-shadow: 0 0 0 .5em #655;
            }
        </style>

9.条纹背景：

可以使用 repeating-linear-grandient 生成斜向条纹。

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。

为了设置同色系的条纹，可以先为元素设置好背景色，然后设置透明渐变以获取淡色条纹。

        <style type="text/css">
            div {
              width: 240px;
              height: 160px;
              margin: 32px auto;
              
              background: #58a;
              background-image: repeating-linear-gradient(
                30deg,
                rgba(255,255,255,.5),
                rgba(255,255,255,.5) 15px,
                transparent 0,
                transparent 30px
              );
            }
        </style>

10.复杂的背景图案：

示例1：background-image 可以用逗号分隔指定多个值，借用这个特性可以实现许多有趣的图形。

<div class="container">
  <div class="example example-1"></div>
  <div class="example example-2"></div>
</div>

        <style type="text/css">
            .container {
              display: flex;
              flex-flow: row nowrap;
              justify-content: center;
              
              padding-top: 32px;
            }

            .example {
              width: 168px;
              height: 168px;
              margin-right: 16px;
              
              border: 10px solid rgba(255,255,255,.5);
              border-radius: 100%;
              background-size: 30px 30px;
            }

            .example-1 {
              background-image: 
              linear-gradient(rgba(200,0,0,.5), rgba(200,0,0,0.5) 50%, transparent 0),
              linear-gradient(90deg, rgba(200,0,0,.5), rgba(200,0,0,.5) 50%, transparent 0);
            }

            .example-2 {
              background-color: #58a;
              background-image: linear-gradient(#fff 1px, transparent 0),
                linear-gradient(90deg, #fff 1px, transparent 0);
            }
        </style>

示例2：在未利用预处理器的情况下，如果需要修改圆点的尺寸及间隔，将改动四处代码。建议使用预处理器的 mixins。

        <style type="text/css">
            div {
              width: 240px;
              height: 180px;
              margin: 32px auto;
              
              background: #655;
              background-image: radial-gradient(tan 30%, transparent 0),
                radial-gradient(tan 30%, transparent 0);
              background-size: 30px 30px;
              background-position: 0 0, 15px 15px;
            }
        </style>

11.伪随机背景

将三个背景的宽度设置为质数，这样背景重复的最小尺寸将为三个质数的乘积。所以选择大小合适的质数将使的在已知分辨率下无规律可循，即实现伪随机

12.连续的图像边框

结合 background-clip 和 background-origin。 background-origin 的值默认是 padding-box，所以背景图像在 padding-box 的基础上显示是正常的，由于 background-clip 又指明将背景延伸到 border-box，所以这个时候的背景实际上是被拉伸的。为了正常的显示，我们需要先将 background-origin 设置为 border-box。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
              width: 240px;
              margin: 32px auto;
              padding: 1em;
              
              background: linear-gradient(#fff, #fff), url("smile.jpeg");
              background-size: cover;
              background-clip: padding-box, border-box;
              border: 1em solid transparent;
            }
        </style>
    </head>
    <body>
        <div>you will have it if it belongs to you,whereas you don't kvetch for it if it doesn't appear in your life.</div>
    </body>
</html>

posted on 2018-12-29 11:02 myworldworld 阅读(235) 评论(0) 收藏举报

刷新页面返回顶部

myworldworld

前端练习九：背景与边框示例

导航

公告