CSS漂亮盒子(下)
4.多重背景
CSS支持一个元素设置多个背景图片。
每个背景属性有相应的多值语法,多个值由逗号分隔。
.multi-bg-shorthand {
width: 300px;
height: 200px;
background: url(img/spades.png) left top no-repeat,
url(img/hearts.png) right top no-repeat,
url(img/diamonds.png) left bottom no-repeat,
url(img/clubs.png) right bottom no-repeat,
pink;
}
如果随后的背景属性值少于背景图片的个数,那么相应的值会循环使用。
.multi-bg-shorthand {
width: 300px;
height: 200px;
background: url(img/spades.png) left top,
url(img/hearts.png) right top,
url(img/diamonds.png) left bottom,
url(img/clubs.png) right bottom,
pink;
background-repeat: no-repeat; /* 用于4张图片 */
}
5.边框与圆角
- 可以分别为盒子的各边设置边框,也可以一次性为四边设置边框
- 除非明确指定
box-sizing
属性,否则边框宽度会影响盒子的尺寸 - 设置边框的样式使用
border-style
- 可以使用
border
简写属性来设置所有边框属性(border: 2px solid #000
)
5.1 边框半径:圆角
给border-radius
属性一个长度值,就可以一次性设置盒子四个角的半径。
border-radius: 0.5em;
分别设置每个圆角的半径,即从左上角开始,按顺时针方向依次列出各个值。
/* 每个值本身其实也是简写,它们各自表示相应圆角水平和垂直方向拥有相同的半径。 */
border-radius: 0.5em 2em 0.5em 2em;
如果想把每个角设置成非对称的,也可以用两组值分别指定两个方向的半径,先水平再垂直,两组值以斜杠分隔。
border-radius: 2em .5em 1em .5em / .5em 2em .5em 1em;
如果对角的值相同,那就可以省略右下和左下角的值。
/* 第一个值设置左上和右下角,第二个值设置右上和左下角。 */
border-radius:2em 3em;
5.2 创建正圆和胶囊形状
在给border-radius
指定百分比值时,x轴和y轴分别相对于元素的宽度和高度来计算实际值。
<div class="round"></div>
<div class="round oval"></div>
div {
display: inline-block;
margin-right: 1em;
}
.round {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #59f;
}
.oval {
width: 300px;
}
"胶囊形",即一个矩形的两端各带一个半圆形,这种形状在工程上称为“长圆形”(obrund)。
<a class="obrund" href="#">A ”pill-shape”</a>
a {
text-decoration: none;
color: #fff;
background-color: #59f;
padding: 1em;
}
.obrund {
border-radius: 999em; /* 任意非常大的值 */
}
5.3 边框图片
边框图片,即为元素指定一张图片作为边框。
border-image
属性支持把一张图片切成9块,我们只管定义切图规则,浏览器会自动把每一块应用到指定的边框位置。
.motto {
border: 40px solid #f9b256;
/* 加载图片picture-frame.png,在每边向内40像素的位置切开 */
border-image: url(img/picture-frame.png) 40;
}
注意:指定切片参考线位置的“40像素”没有px单位,这是为了同时适应SVG和位图而使用的小技巧。
必须把border
简写属性放在border-image
属性前面,因为规范规定简写语法会重置所有边框属性。
6.盒阴影
使用box-shadow
属性给元素添加阴影。
/* x轴偏移 y轴偏移 模糊半径 颜色 */
box-shadow: .25em .25em .5em rgba(0, 0, 0, 0.3);
在模糊半径后面可以再加一个值,表示扩展半径,用于扩展阴影的大小。
box-shadow: 1em 1em .5em .5em rgba(0, 0, 0, 0.3);
使用关键字inset
为元素应用内阴影。
box-shadow: inset .25em .25em .5em rgba(0, 0, 0, 0.3);
给一个元素应用多个阴影,以逗号分隔多组值。
box-shadow: 0 0 0 10px #1c318d,
0 0 0 20px #3955c7,
0 0 0 30px #546dc7,
0 0 0 40px #7284d8;
7.渐变
在背景上使用渐变色是一种常见设计,能给页面增加一种纵深感。
7.1 线性渐变
background-image: linear-gradient(to bottom, #cfdeee 0%, #8da9cf 100%);
linear-gradient()
函数第一个参数表示渐变线的方向。
渐变线总是始于元素的一个边或一个角,然后穿过元素的中心区域。
线性渐变的默认方向是自上而下(to bottom
)。而0%和100%分别表示第一个和最后一个色标的位置。
因此,前面的例子可以简写如下:
background-image: linear-gradient(#cfdfee, #8da9cf);
可以使用deg单位指定渐变线的角度,0deg表示垂直向上,增大角度值就意味着沿顺时针方向旋转,直到360度。
background-image: linear-gradient(45deg, #cfdfee, #4164aa);
新增色标若未指定位置,则在0%~100%范围内取均值。
/* 5个未指定位置的色标:0%、25%、50%、75%、100% */
background-image: linear-gradient(red, green, blue, yellow, purple);
除了百分比,还可以使用绝对值指定色标位置。
/* 从顶部浅蓝色开始,往下到100像素位置时过渡到深蓝色,然后一直到背景图片区域底部都是同样的深蓝色 */
background-image: linear-gradient(#cfdfee, #8da9cf 100px);
7.2 放射渐变
放射渐变从一个中心点开始向四周扩散,覆盖的范围可以是圆形或椭圆形。
- 放射渐变的类型:圆形(circle)和椭圆形(ellipse)。
- 射线半径决定渐变范围大小。圆形只接受一个半径值,而椭圆形接受x轴和y轴两个方向的半径值。椭圆形可以接受任意长度或百分比值,百分百值相对于轴向的背景图片大小。圆形只接受长度值,不接受百分比值。此外,还可以使用关键字代表渐变区域结束的位置。
closest-side
和farthest-side
分别表示渐变区域延伸至最近边还是最远边,closest-corner
和farthest-corner
分别表示渐变区域边缘接触最近角还是最远角。 - 色标沿渐变扩展方向指定,以逗号分隔。
background-image: radial-gradient(circle closest-corner at 20% 30%, #cfdfee, #2c56a1);
上面的例子的渐变区域中心位置为x轴方向20%,y轴方向30%,放射半径为该中心到最近角的距离。在圆周外部,由终点色标颜色覆盖整个背景图片区域。
7.3 重复渐变
重复渐变函数可以沿渐变直线(或射线)重复某个渐变色标组合,重复次数视其大小(由background-size
决定)及允许的大小(元素大小)而定。
/* 重复的线性渐变 */
background-image: repeating-linear-gradient(#cfdfee, #2c56a1 20px);
/* 重复的放射渐变 */
background-image: repeating-radial-gradient(#cfdfee, #2c56a1 20px);
7.4 把渐变当作图案
body {
margin: 0;
background-color: #fff;
background-image: linear-gradient(
transparent,
transparent 50%,
rgba(55, 110, 176, 0.3) 50%
),
linear-gradient(
to right,
transparent,
transparent 50%,
rgba(55, 110, 176, 0.3) 50%
);
background-size: 40px 40px;
}
桌布似的花格图案:
把相邻的两个色标(transparent 50%
和rgba(55, 110, 176, 0.3) 50%
)重叠在一起,让渐变无从发生,而是突然的变化,形成锐利的线条。
通过background-size: 40px 40px;
控制背景大小和重复。
渐变图案、盒阴影以及伪元素,这些加起来完全可以代替图片来实现各种创意。
7.5 为嵌入图片和元素添加样式
文档中的图片与其他元素不同,它本身是有像素宽度和高度的,而且宽度和高度的比例固定。在可伸缩的设计中,元素宽度要随浏览器窗口宽度变化而变化,此时也需要CSS来控制图片及其他嵌入的元素。
7.5.1 可伸缩的图片模式
<div class="img-container">
<img src="img/profile.jpg" alt="Charles the Cat">
</div>
<div class="img-container img-container-large">
<img src="img/profile.jpg" alt="Charles the Cat">
</div>
.img-container {
padding: 1em;
border: 1px solid #777;
border-radius: 1em;
width: 100px;
display: inline-block;
vertical-align: top;
margin-right: 2em;
}
img {
max-width: 100%;
}
.img-container-large {
width: 500px;
}
根据需要把图片渲染成不同大小(所谓的响应式图片)对性能影响很大。
max-width
属性意味着图片会随着包含它的容器缩小而缩小,但在容器变大时,它不会大到超出自身的固有尺寸。
7.5.2 控制对象大小的方法
object-fit
属性的默认值为fill
,意味着图片内容会在必要时拉伸以填满容器,因此可能破坏宽高比。
参考:object-fit - CSS(层叠样式表) | MDN
7.5.3 可保持宽高比的容器
对于具有固定宽高比的位图,把高度设置为auto,只改变宽度,或者把宽度设置为auto,只改变高度,都是可以的。
iframe
和object
元素没有固定的宽高比。CSS规范指出,对于没有指定大小的可替代内容,最终的默认大小为300像素宽或150像素高。(听上去不可思议,但这是真的!)
在页面中包含可伸缩的嵌入对象:
<div class="object-wrapper">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
.object-wrapper {
width: 100%;
height: 0;
position: relative;
padding-bottom: 75%; /* 315÷420,高度是宽度的75% */
}
.object-wrapper iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
参考资料:
CSS漂亮盒子(下)的更多相关文章
- css - inline-block 盒子下的内容文字错位问题
参考资料: “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落.错位”的原因及解决方法: 正文: 场景:两个 div 排在一行上,各有固定宽高, ...
- CSS漂亮盒子(上)
HTML文档中的所有元素都是由矩形盒子构成的--不管是包含页面结构的容器元素,还是段落中的每行文本,归根结底都是盒子. 1.背景颜色 设置页面背景颜色. body { background-color ...
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- CSS属性操作/下
CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...
- 深入理解CSS系列(一):理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- 认识CSS中盒子模型
前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
随机推荐
- wtforms: remove ' fill out this field'
As of WTForms 2.2 (June 2nd, 2018), fields now render the required attribute if they have a validato ...
- 安装visual stdio 2017后依然报错:Unable to find vcvarsall.bat
安装visual stdio 2017后依然报错:Unable to find vcvarsall.bat 解决办法:更新setuptools 原文章:https://blog.csdn.net/wl ...
- Visual SVN Server+TortoiseSVN进行源代码管理
安装VisualSVN Server 安装完之后,可配置SVN Server的IP地址,右键下图红色部分,选择属性,然后可配置ServeName和IP Address 之后可以创建用户.用户组和项目库 ...
- Halcon一维测量官方案例解析
下面的例子简要介绍了如何使用HALCON的一维测量工具.最长的部分是预处理和后处理:测量本身只包括两个操作符调用. 测量保险丝-fuse 预处理主要是测量线的生成.在示例程序中,这个步骤是通过将测量对 ...
- tomcat内容总结
tomcat的安装以及配置环境变量 1.tomcat的官网下载地址:http://tomcat.apache.org/ tomcat有很多版本,有解压版 和 安装版,还分windows (还分为32位 ...
- ArcGIS api for javascript querytask 返回结果上限1000的问题
我用的是ArcServer 10.2,打开ArcCatalog找到自己发布的服务,右键Service Properties,左侧点击Parameters,右侧有一个Maximum number of ...
- CondenseNet:可学习分组卷积,原作对DenseNet的轻量化改造 | CVPR 2018
CondenseNet特点在于可学习分组卷积的提出,结合训练过程进行剪枝,不仅能准确地剪枝,还能继续训练,使网络权重更平滑,是个很不错的工作 来源:晓飞的算法工程笔记 公众号 论文:Neural ...
- layui 魔改:上传时的真实进度条
这个问题本身不复杂,难点在于需要改 layui 的源码. HTML略. 网页的JS域: layui.use(['upload','element','layer'], function(){ var ...
- uTools - 你的生产力工具集
工具介绍 uTools是一个极简.插件化.跨平台的现代化桌面软件.通过自由选配丰富的插件,打造你得心应手的工具集合. 通过快捷键(默认alt+space)就可以快速呼出这个搜索框.它相当聪明,可以支持 ...
- 基于python实现查询ip地址来源
接口调用方法是在url后面直接加上IP地址. url = 'http://freeapi.ipip.net/218.192.3.42' #中文免费 url2 = 'http://ip-api.com/ ...