css背景与边框

背景侵入边框问题

background-clip: padding-box;

background-clip的属性有content-box、padding-box、border-box, text, 默认为border-box,所以背景会侵入边框,改为padding-box,背景会裁剪到padding, 因而能解决背景侵入边框问题。

详细例子可在MDN上查看:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip

多重边框问题

background叠加

background: deeppink;
background-image: linear-gradient(yellowgreen, yellowgreen),
linear-gradient(#655, #655);
background-size: 100px 100px, 120px 120px;
background-repeat: no-repeat, no-repeat;
background-position: center, center;

代码太过复杂,不够DRY。

使用box-shadow

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

注意点:box-shadow不影响布局和鼠标事件,可通过设置inset属性使得box-shaow投影在元素内部解决。(inset在第一位)

background: yellowgreen;
box-shadow: inset 0 0 0 5px deeppink, inset 0 0 0 15px #655;

(这里因为上传到博客园后box-shadow少了0,导致样式显示异常了,暂时还不知道为啥==)

双重边框可使用border + outline

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

outline能实现box-shaow实现不了的虚线等效果,并能通过outline-offset设置偏移值。
缺点是目前outline只能是矩形,如果存在border-radius,会存在空缺;可通过设置box-shadow来覆盖空缺。现在的outline支持非矩形了。

灵活的背景定位

一个div,padding-rihgt为20px,padding-bottom为10px;要求背景在content-box内部(不覆盖padding)。

相对于右边和下方定位

background-position: right 20px bottom 10px;

使用background-origin

background-origin: content-box;

默认情况下,background-origin相对于padding-box为准,这样的话如果改变padding的值,需要同时修改background-position中的值,而改为相对于content-box后,就需要再修改。

使用calc

background-position: calc(100% - 20px) calc(100% - 10px);

边框内圆角

实现下面的边框内圆角使用两个div能轻松实现,如果要求只是用一个div呢?

something is wrong
background: tan;
border-radius: .8em;
outline: 0.4em solid black;
box-shadow: 0 0 0 0.35em black; // 目前可以不用box-shadow了,因为outline支持非矩形了

其中box-shadow的扩张值应大于等于(2-1)r, r为border-radius的值。

条纹背景

水平条纹

默认为水平条纹(渐变轴为to right,180度):

background-image: linear-gradient(red 50%, yellow 80%);

解析一下,这里的意思是从0%-50%为red,从50%-80%渐变为yellow, 80%-100%为yellow。

垂直条纹

设置旋转角度90deg,为垂直条纹,顺时针旋转为正。

background-image: linear-gradient(90deg, red 50%, yellow 80%);

斜向条纹

同样设置旋转角度即可。

background-image: linear-gradient(60deg, red 20%, yellow 50%, green 90%);
background-size: 30px 100%;

更好的斜向条纹

可以看到,使用linear-gradient实现的斜向条纹在重复的时候不能得到应有的效果,使用repeating-linear-gradient来实现更好的斜向条纹。

background-image: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0,#58a 30px);

对于0的解释:0会使用前面出现过最大的值替代,这里也就是15px, 使用这种方式可以简写;

灵活的同色系条纹

同色系条纹可以用透明层叠加的方式

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

复杂的背景图案

网格

width: 100px;
height: 100px;
background: tan;
background-image:
linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;

波点

width: 100px;
height: 100px;
background: #655;
background-image:
radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;

棋盘

width: 100px;
height: 100px;
background: white;
background-image:
linear-gradient(45deg, black 0, black 25%, transparent 0, transparent 75%, black 0, black 100%),
linear-gradient(45deg, black 0, black 25%, transparent 0, transparent 75%, black 0, black 100%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;

更多的:https://projects.verou.me/css3patterns/

伪随机背景

质数的使用:

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

连续的图像边框

图像边框随元素宽高和边框厚度改变

(这里因为上传到博客园后background不见了,导致示例图显示异常了,暂时还不知道为啥==)

border: 5px solid transparent;
background:
linear-gradient(white, white) padding-box,
url('https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80') border-box 0 0 / cover;

相当于用一个div实现了两个div(白色内容块+底部背景)的效果。

老式信封

(这里因为上传到博客园后background不见了,导致示例图显示异常了,暂时还不知道为啥==)

width: 100px;
height: 50px;
border: 5px solid transparent;
background:
linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, blue 0, blue 37.5%, transparent 0, transparent 50%) 0 / 1em 1em;

四个条纹需要8个色标,这里简化到50%只需要4个色标,如果写到100%,需要8个。

蚂蚁行军

(这里因为上传到博客园后background不见了,导致示例图显示异常了,暂时还不知道为啥==)

width: 100px;
height: 50px;
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;
animation: anti 12s linear infinite;
@keyframes anti {
to {
background-position: 100%;
}
}

脚注

1this is a sentence.
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg, black 0, black 5em, transparent 0);
posted @   每天不emo  阅读(102)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示