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呢?
background: tan; border-radius: .8em; outline: 0.4em solid black; box-shadow: 0 0 0 0.35em black; // 目前可以不用box-shadow了,因为outline支持非矩形了
其中box-shadow的扩张值应大于等于(
条纹背景
水平条纹
默认为水平条纹(渐变轴为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%; } }
脚注
border-top: .2em solid transparent; border-image: 100% 0 0 linear-gradient(90deg, black 0, black 5em, transparent 0);
本文来自博客园,作者:每天不emo,转载请注明原文链接:https://www.cnblogs.com/duanlvxin/p/17155446.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析