CSS3知识汇总14

【半透明边框】

body{background-color:green}

img{

    border:10px solid hsla(0, 0%, 100%, .5);

    background: white;

    background-clip: padding-box;

}

如果不希望背景侵入边框所在的范围，用padding-box将内边距的外沿把背景裁掉

【实线多重边框】

div{

    width:100px;

    height: 100px;

    margin:80px auto;

    background: yellowgreen;

    box-shadow: 0 0 0 10px #655,

                0 0 0 15px deeppink,

                0 2px 5px 15px rgba(0,0,0,.6);  /*投影*/

}

2.使用outline

div{

    width:100px;

    height: 100px;

    margin:80px auto;

    background: yellowgreen;

    border:10px solid #655;

    outline: 5px solid deeppink; /*适用双重边框*/

}

【虚线双重边框】

div{

    width:100px;

    height: 100px;

    margin:80px auto;

    background: yellowgreen;

    border:10px solid #655;

    outline: 5px dotted deeppink;

}

【背景定位】

div{

    background:url("css3.png") no-repeat bottom right #58a;

    background-position: right 20px bottom 10px;

    width: 600px;

    height: 600px;

}

【边框内圆角】

两个div时：

.con{

    background-color: #655;

    padding: .8em;

}

.con > div{

    background-color: tan;

    border-radius: .8em;

    padding:1em;

}

一个div时：

.con{

    background-color: tan;

    border-radius: .8em;

    padding: 1em;

    box-shadow: 0 0 0 .6em #655;

    outline: .6em solid #655;

    /*box-shadow: 0 0 0 .6em red;

    outline: .6em solid #000;  注释中的改变能看出如何实现的*/

}

【条纹背景】

.con{

    width: 300px;

    height: 200px;

}

1.颜色从#fb3过渡到#58a

background:linear-gradient(#fb3, #58a);

2.色标拉近一点

background:linear-gradient(#fb3 20%, #58a 80%);

3、变为50%，变成两色背景

background:linear-gradient(#fb3 50%, #58a 50%);

4、等宽条纹

background-size: 100% 30px;

background-size后，条纹变成等宽的15px

5、不等宽的条纹

background:linear-gradient(#fb3 20%, #58a 0%);

第二个色值值为0，它的位置就总是被浏览器调整为前一个色值的位置值

6、三色条纹

background:

        linear-gradient(to right,

        blue 33.3%, white 0,

        white 66.6%, red 0);

    background-size: 100% 30px;

7、四色条纹

background:

        linear-gradient(

            #fb3 33.3%, #58a 0,

            #58a 66.6%, yellowgreen 0,

            yellowgreen 88.8%, red 0

        );

8、垂直条纹

background:

        linear-gradient(to right,

            #fb3 50%, #58a 0

        );

to bottom是默认值

9、波纹条纹

background:

        linear-gradient(45deg,

            #fb3 50%, #58a 0

        );

10、斜向条纹

background:

        linear-gradient(45deg,

            #fb3 25%, #58a 0, #58a 50%,

            #fb3 0, #fb3 75%, #58a 0

        );

    background-size: 42px 42px; 

使用 repeating-linear-gradient循环

background:

        repeating-linear-gradient(45deg,

            #fb3, #fb3 15px, #58a 0, #58a 30px

        );

    background-size: 42px 42px;