css揭秘笔记——背景与边框
背景与边框
半透明边框
知识点
background-clip: [border-box] |[padding-box] | [content-box];hsla(<色相>, <饱和度>, <明度>, <透明度>)
色相:0~360
饱和度:0%~1000% (0的时候也要加%!!!不然会出错)
明度: 0%(黑色)~100%(白色)
透明度:0~1
#### 难题:
正常情况下,想要达到半透明边框的效果,使用
border: 10px solid hsla(0,0%,100%,.5);
background: white;
这种方式不行,因为背景色延伸到border下面,半透明的边框反映的还是背景色。
#### 解决方案:
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip:padding-box;
这样就使背景只延伸到padding边沿。
半透明边框效果图
多重边框
知识点
box-shadow:none|| inset && [<x-offset> <y-offset> <blur-radius> <spread-radius> <color>];outline: <width> <style> <color>;outline-offset
#### 解决方案1
border-radius:20px;
box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink,5px 5px 10px 15px rgba(0,0,0,.5);
background:yellowgreen;
效果如下图:
注意:
- 投影不占据空间,会和相邻元素叠加,也不会影响box-sizing属性;
- 贴合圆角,设置可border-radius,会自动变成相应圆角;
- 不会响应鼠标事件,除非使用inset关键字,使投影绘制在边框内。
解决方案2
border:10px solid #655;
outline: 5px solid deeppink;
这种加描边的方法只能绘制出两层边框的效果。
另外,添加outline-offset还有另外的效果:
border-radius:10px;
outline:2px dashed white;
outline-offset:-15px;
background:black;
注意:
- 描边也不占据空间;
- outline不能接受逗号分隔的多个值;
- 描边不能贴合圆角;
- 不同浏览器效果可能不一样。
灵活的背景定位
知识点
background-position扩展语法
background-origin:padding-box(默认值)|content-box|border-box
(背景图片的区域)
#### background-clip、background-origin和background-position的区别
这三个属性都和背景的位置有关,但是是有区别的。
首先,background-clip是针对背景颜色和图片的;而background-origin和background-position仅指背景图片。
background-clip 设置元素的背景是否延伸到边框下面。值为border-box(默认值)、padding-box和content-box。
background-origin指定背景图片的原点位置。值为border-box、padding-box(默认值)、content-box。
border: 1.5em solid transparent;
background: url(./image/1001-1.jpg);
background-size: cover;
background-clip: border-box;
background-origin: padding-box; /*这是默认值*/
背景图片延伸到边框,但是图片的起始位置是从padding开始的。
将background-origin改为border-box:
这时,背景延时到边框下,并且图片的起始位置是border。
另外,background-position是在background-origin设置的图片起始位置的基础上的偏移量。
background-origin: border-box;
background-position:50px 50px;
background-origin: padding-box;
background-position:50px 50px;
偏移差别很明显吧~
问题1
是背景图片定位在右下角,据底部和右边20px,且容器大小不固定.
解决方案1
一种方法是:
background:url(./image/heart.png) no-repeat deepskyblue;
background-position: right 20px bottom 20px;
在偏移量前面指定关键字。
另一种方法是:
background:url(./image/heart.png) no-repeat deepskyblue;
background-position: calc(100%-20px) calc(100%-20px);
效果如下:
问题2
背景图片在padding内侧,若按方案1的方法,padding改变,background-position的值也得改,这样就不是很好了。
解决方案2
padding: 20px;
background: url(./image/heart.png) no-repeat deepskyblue bottom right;/*或 100% 100%*/
background-origin: content-box;
### 边框内圆角
不使用两个嵌套的div,要实现这样的效果:
background: tan;
border-radius:.8em;
box-shadow:0 0 0 .4em #655;
outline: .7em solid #655;
注意大小宽度:(√2 -1)*border-radius < 扩张半径 < outline-width
条纹背景
渐变背景
background:linear-gradient(goldenrod,steelblue);/*相当于goldenrod 0%,steelblue 100%*/
background: linear-gradient(goldenrod 20%,steelblue 80%)
条纹背景
background: linear-gradient(goldenrod 50%,steelblue 0); /相当于goldenrod 50%,steelblue 50%*/
background: linear-gradient(goldenrod 50%,steelblue 0);
background-size:100% 30px;
background: linear-gradient(goldenrod 30%,steelblue 0);
background-size:100% 30px;
background: linear-gradient(goldenrod 33.33%, steelblue 0, steelblue 66.66%, yellowgreen 0);
background-size:100% 45px;
background: linear-gradient(to right, goldenrod 50%,steelblue 50%);
background-size:30px 100%;
background: linear-gradient(45deg, goldenrod 50%,steelblue 50%);
background-size:30px 30px;
background: linear-gradient(45deg, goldenrod 25%,steelblue 0, steelblue 50%,goldenrod 0, goldenrod 75%,steelblue 0);
background-size:30px 30px;
/*上个由于切片是30*30的,所以条纹的宽度是小于15px的,要想使条纹宽度是15,就得勾股定理计算了,这里42取了约数*/
background: linear-gradient(45deg, goldenrod 25%,steelblue 0, steelblue 50%,goldenrod 0, goldenrod 75%,steelblue 0);
background-size:42px 42px;
敲黑板,划重点!!!
linear-gradient() 和 radial-gradient() 各有一个循环式的加强版: repeating-linear-gradient() 和 repeating-radical-gradient()
background: repeating-linear-gradient(45deg, goldenrod,steelblue 30px);
background: repeating-linear-gradient(45deg, goldenrod, goldenrod 15px,steelblue 0, steelblue 30px);
/*斜45度宽15px的斜条纹*/
/*不需要计算,斜任何度数的条纹实现*/
background: repeating-linear-gradient(60deg, goldenrod, goldenrod 15px,steelblue 0, steelblue 30px);
书上说,最好用前面那种方式(贴片+百分比)实现水平垂直的条纹,用repeat的方式实现斜条纹;45度的斜条纹两者结合的方式。
灵活的同色系条纹
代码一:
background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);
代码二:
background: #58a;
background-image: repeating-linear-gradient(30deg, hsla(0, 80%, 90%, .2), hsla(0, 80%, 90%, .2) 15px, transparent 0, transparent 30px);
以上两段代码实现了同一个效果:
第二段代码的好处:
- 更加DRY,只修改一处就可以改变所有颜色;
- 体现了两个条纹色的关系;
- 背景色起到了回退作用。
复杂的背景图案
网格
background: white;
background-image: linear-gradient(rgba(200,0,0,.5) 50%, transparent 0), linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
background: cornflowerblue;
background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
background: cornflowerblue;
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: 75px 75px, 75px 75px,15px 15px,15px 15px;
波点
background: saddlebrown;
background-image: radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background: saddlebrown;
background-image: radial-gradient(tan 20%, transparent 0),radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position:0 0, 15px 15px;
提示:可以使用预处理器的mixin来简化代码。
棋盘
step1
background: lightgray;
background-image: linear-gradient(45deg, darkgray 25%, transparent 0),linear-gradient(45deg, transparent 75%, darkgray 0);
background-size: 30px 30px;
代码还可以简化为:
background: lightgray;
background-image: linear-gradient(45deg, darkgray 25%, transparent 0, transparent 75%, darkgray 0);
background-size: 30px 30px;
step2
background: lightgray;
background-image: linear-gradient(45deg, darkgray 25%, transparent 0, transparent 75%, darkgray 0),linear-gradient(45deg, darkred 25%, transparent 0, transparent 75%, darkred 0);
background-size: 30px 30px;
background-position:0 0,15px 15px;
颜色统一之后,就是棋盘了
当然,使用预处理器的mixin来进一步简化代码就更好了。
当然,使用svg代码更简洁。
伪随机背景
background: beige;
background-image: linear-gradient(90deg, orange 11px, transparent 0), linear-gradient(90deg, yellowgreen 23px, transparent 0), linear-gradient(90deg, sienna 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;
四种颜色的条纹实现的随机条纹背景,注意点
- 以一种颜色当做背景,另外三种当做条纹。
- 以不同尺寸的渐变贴片叠加。
- 切片以不同间距重复数次之后统一对齐的地方是这些间距的最小公倍数,而质数之间的最小公倍数是它们的乘积,这样也是最大的,所以间距应该用质数。
连续的图像边框
图像边框,可以使用border-image属性,但是它的九宫格伸缩法的原理导致了这种边框不能成为连续的图像。
可以使用背景图片加前置的纯色背景来实现。
padding: 1em;
border:1.5em solid transparent;
background:linear-gradient(white, white), url(./image/1001-1.jpg);
background-clip:padding-box, border-box;
background-size: cover;
background-origin: border-box;
更改元素宽高,边框依然是连续的。
老式信封
border: 1em solid transparent;
padding: 1em;
background: linear-gradient(white, white), repeating-linear-gradient(-45deg, red 0, red 15px,transparent 0, transparent 30px, blue 0, blue 45px, transparent 0, transparent 60px);
background-clip: padding-box, border-box;
background-origin: border-box;
代码可简化为:
border: 1em solid transparent;
padding: 1em;
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/ 5em 5em;
这样,通过background-size就可以改变条纹的宽度,通过border改变边框的宽度。
注意:0/5em 5em
表示background-position和background-size,在background中一旦出现background-size,前面就必须是background-position,且用/
分开。
还可以用border-image来实现:
border: 1em solid transparent;
padding: 1em;
border-image:
16 repeating-linear-gradient(-45deg, red 0, red 1em,transparent 0, transparent 2em, blue 0, blue 3em, transparent 0, transparent 4em);
但是这样尺寸有变,修改的地方就会很多。
蚂蚁行军
(假装图片是动态的)
@keyframes ants { to {background-position: 100%} }.marching-ants{border: 1px solid transparent;padding: 1em;background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/.6em .6em;animation: ants 12s linear infinite;}
脚注
border-top: .2em solid transparent;
border-image:100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);
[1]: /img/bVXHvz
css揭秘笔记——背景与边框相关推荐
- 《CSS揭秘》-背景与边框
1.给一个容器设置一层白色背景和一道半透明白色边框. 思路:实际是设置的背景会延伸到边框所在的区域的下层,可以通过background-clip属性调整背景的默认行为. background-clip ...
- css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
- CSS基础学习-背景、边框的学习
CSS基础学习-背景.边框的学习 背景属性 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其 ...
- css --- [读书笔记] 盒模型(边框、内外边距)
说明 源代码 学习 盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位 目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距 能说出内边距的作用,设置不同数值分别代表 ...
- css揭秘笔记——用户体验
选用合适的鼠标光标 css3提供了一大批内建光标(cursor) 其中某些光标很突出,因为只需要花费极少的代码,就可以迅速地提升大量网页应用的可用性. 比如禁用(not-allowed),比如,公共触 ...
- 【温故知新】CSS学习笔记(盒子边框介绍)
CSS盒子边框 CSS中其实就三个大模块:盒子模型.浮动.定位. 其中所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器,每个矩形都由元素的内容.内边距(padding ...
- css --- [学习笔记]背景图片小结 css三大特性
源代码 参考 1. 行高(line-height) 目标 理解 - 能说出行高和高度三种关系 - 能简单理解为什么行高等于单行文字会垂直居 应用 使用行高实现单行文字垂直居中 能会测量行高 2. CS ...
- CSS 颜色 字体 背景 文本 边框 列表 display属性
1 颜色属性 <div style="color:blueviolet">ppppp</div><div style="color:#ff ...
- CSS边界样式 (背景、边框)
文章目录 :-: border-radius (圆角) :-: box-shadow (阴影) :-: 动图 - Demo :-: border-image 边框背景 :-: background 背 ...
最新文章
- 在linux(centos7)下本地仓库的搭建
- 对示波器测量正弦波幅值和相位仿真实验
- Python IDLE或Python Shell不支持中文编码的解决方案
- ztree获取勾选节点数据并且与表单信息合并
- Hadoop Install
- [Buzz.Today]2013.03.14
- 从0到1设计业务系统
- node 加密解密模块_聊聊Node加密模块crypto加密原理的那些事
- java基础三--IO流(1)
- 继屠呦呦后,下一个得诺奖的中国人可能是他?
- qq传离线文件提示服务器超时,QQ传文件时进度条显示不正常的解决办法
- FBX SDK快速简笔(基本)
- web前端技术有哪些,小白必看
- 【Oracle】TYPE定义的数据类型
- .net 邮箱验证码 邮箱验证码实现用户注册
- 实验: GVRP 配置,三层交换机通讯 ,VLAN 间路由,单臂路由与路由器子接口的配置,vlan-单臂路由技术
- Google 主页空间测试报告
- 【锐捷交换】交换机聚合接口配置
- illustrator下载_在Illustrator和手绘中创建矢量图形
- Win10下LoadRunner12 下载安装汉化图文教程(含LoadRunner安装包)