css让前端飞Web前端之路

CSS中的背景和边框

2017-07-10  本文已影响140人  阿r阿r

1.半透明边框

问题原因：背景会扩展到边框border下
解决方案：把背景限制在padding-box中
background-clip: padding-box;

Paste_Image.png

2.多重边框

box-shadow方案
Paste_Image.png 
div {
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
    box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
}

注意：这里的边框是向外扩展的外边框，不会响应鼠标事件，加入属性insert可以解决这个问题

Paste_Image.png
outline 方案
background: yellow;
border: 10px solid #655;
outline: 5px solid deeppink;```
注意：只适用于双层边框的效果；不一定能产生适应border-radius属性的圆角。

####3.背景的灵活定位
#####background-position 方案

div {
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;

}```
注意：提供回退方案，使得在不支持background-position的浏览器中图像在右下角。

background: url(http://csssecrets.io/images/code-pirate.svg)
                no-repeat bottom right #58a;```

#####background-origin 方案
正常的background-position是以padding-box为准的，要排除padding-box 的影响可以使用background-origin 属性。

background-origin: content-box;
div {
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-origin: content-box;

/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px; //改变padding的值，背景的位置随之变化，固定在content-box内
color: white;
font: 100%/1 sans-serif;

}

#####calc() 方案
采用左上角思维，用calc()函数来确定位置，100%偏移量就靠右，100%-20px就是距离右侧边界20px;

div {
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: calc(100% - 20px) calc(100% - 10px);

/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;

}```
注意：这个方案不会随padding的变化而变化，背景固定在padding box 内。

4.边框内圆角

效果：边框内显示圆角，边框外部仍然是直角
解决方案：box-shadow和outline配合使用。
注意：box-shadow的宽度最小值，可以直接取border-radius的一半

div {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */
    
    max-width: 10em;
    border-radius: .8em;
    padding: 1em;
    margin: 1em;
    background: tan;
    font: 100%/1.5 sans-serif;
}
Paste_Image.png

5.条纹背景

问题：用css直接创建条纹背景
解决方案：利用渐变色的色标位置，当两色色标位置重合时，渐变效果消失，变成实色条纹

水平条纹

两色条纹

background: linear-gradient(#fb3 50%, #58a 0); 
background-size: 100% 30px;```
注意：第二个色标位置本来应该是50%，为了避免每次都修改两个参数，用到规范：当第二个色标位置设置为0，那么它的位置就会调整为前一个色标的位置值
 
![Paste_Image.png](http:https://img.haomeiwen.com/i4648896/c6e5320dbbf32ba4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

三色条纹

background: linear-gradient(#fb3 33.3%, #58a 0，#58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

#####垂直条纹

background: linear-gradient(to right, #fb3 50%, #58a 0); //添加to right 属性
background-size: 30px 100%; //颠倒值，左右，上下

![Paste_Image.png](http:https://img.haomeiwen.com/i4648896/e603b18811b2f43e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
#####两色斜向条纹

background: linear-gradient(45deg

fb3 25%, #58a 0,

58a 50%, #fb3 0,

fb3 75%, #58a 0);

backgtound-size: 42.4px 42.4px

#####更加简洁的斜向条纹方案

background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px,
#58a 0, #58a 30px);//repeating-linear-gradient属性
height: 100%;

#####设置同色系条纹
方法：设置最深的颜色为背景色，叠加半透明白色条纹来产生浅色条纹

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);

height: 100vh;

![Paste_Image.png](http:https://img.haomeiwen.com/i4648896/929a64d7ce2463b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 

####6.复杂的背景图案
CSS3 图案库lea.verou.me/css3patterns 
SVG 图案库philbit.com/svgpatterns
网格
思路：把水平和垂直的条纹进行叠加
#####方格条纹：

background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

#####可维护、合理的方案，可多种网格叠加

background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;

#####波点

background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;```

棋盘
background: #eee;
background-image: 
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position:0 0,15px 15px,15px 15px,30px 30px;
background-size: 30px 30px;
优化
background: #eee;
background-image: 
linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 0,transparent 75%,rgba(0,0,0,.5) 0),
linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 0,transparent 75%,rgba(0,0,0,.5) 0);
background-position:0 0,15px 15px;
background-size: 30px 30px;

7.随机背景

解决方法：通过质数来增加随机性。又称为“蝉原则”，可用在需要生成随机情况的场合。

background: hsl(20, 40%, 90%);
background-image: 
    linear-gradient(90deg, #fb3 11px, transparent 0),
    linear-gradient(90deg, #ab4 23px, transparent 0),
    linear-gradient(90deg, #655 41px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;
Paste_Image.png

8.连续的图像边框

border-image：工作原理，九宫格伸缩法，不适合
思路：在背景图片上再加上一层纯白色的实色背景

图片边框背景
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white),
            url(stone-art.jpg);//这里是边框背景图片地址
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

简化代码

border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
       url(http://csssecrets.io/images/stone-art.jpg) border-box  0 / cover;
信封边框
用background叠加
div {
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, 
                  #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;
    
    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;
}
用border-image属性
div {
    padding: 1em;
    border: 1em solid transparent;
    border-image:16 
                repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, 
                  #58a 0, #58a 3em, transparent 0, transparent 4em);
    
    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;
}
Paste_Image.png
蚂蚁行军效果
@keyframes ants{to{background-position:100%}}

div {
    padding: 1em;
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, black 0, black 25%, 
                 white 0, white 50%) 0 / .6em .6em;
    max-width: 20em;
    animation: ants 12s linear infinite;
}
Paste_Image.png Paste_Image.png
用border-image做一个顶部边框被裁减的效果

思路：运用border-image加上一条由渐变生成的垂直条纹，而边框的粗细有border中的width来控制。

div {
    max-width:20em;
    border-top: .2em solid transparent;
    border-image: 100% 0 0 linear-gradient(90deg, currentColor 8em, transparent 0);
    padding-top: 1em;
}
Paste_Image.png

本文整理自《CSS揭秘》

上一篇 下一篇

猜你喜欢

热点阅读