《CSS揭秘》-背景与边框

Alisa0 2019-06-30

1.给一个容器设置一层白色背景和一道半透明白色边框。

思路:实际是设置的背景会延伸到边框所在的区域的下层,可以通过background-clip属性调整背景的默认行为。

background-clip 属性:背景的绘制区域

描述
border-box背景被裁剪到边框盒
padding-box背景被裁剪到内边距框
content-box背景被裁剪到内容框
border: 20px solid hsla(0, 0%, 100%, .5);
background: #fff;
background-clip: padding-box;

《CSS揭秘》-背景与边框

2. 多重边框实现

box-shadow 方案

思路:利用box-shadow的第四个参数(扩张半径)指定正负值,让投影面积加大或减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值,得到的投影像一道实线边框。优点:可以获得更多层边框;贴合border-radius属性产生圆角。缺点:只能描绘直线一种样式。

box-shadow 属性:向框添加一个或多个阴影。支持逗号分割语法,我们可以创建任意数量的投影。box-shadow是层层叠加的,第一层投影位于最顶层,依次类推。因此,需要按规律调整扩张半径。

描述
h-shadow必需。水平阴影的位置。允许负值
v-shadow必需。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的尺寸
color可选。阴影的颜色
inset可选。将外部阴影 (outset) 改为内部阴影
box-shadow: h-shadow v-shadow blur spread color inset;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0, 0, 0, .5);

《CSS揭秘》-背景与边框

注意:

  1. 投影的行为不会影响布局,也不会收到box-sizing属性的影响。不过可以通过内边距或外边距来额外模拟出边框所需要占据的空间。
  2. 投影出现在元素的外圈,不会响应鼠标事件,比如悬停或点击。你可以给box-shadow属性加上inset关键字,使投影绘制在元素的内圈,此时需要增加额外的内边距来腾出足够的空隙。
outline 方案

思路:只需要两层边框,可以先设置一层常规边框,再加上outline(描边)属性产生外层边框。优点:边框样式十分灵活。缺点:只适用于双层边框的场景;边框不一定会贴合border-radius属性产生的圆角。

outline属性:是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

描述
outline-color规定边框的颜色
outline-style规定边框的样式
outline-width规定边框的宽度
background: yellowgreen;
outline: 5px solid deeppink;

《CSS揭秘》-背景与边框

设置box-radius值效果:
《CSS揭秘》-背景与边框

通过设置outline-offset属性控制它与元素边缘之间的距离

background: #485152;
outline: 1px dashed #fff;
outline-offset: -10px;

《CSS揭秘》-背景与边框

3. 针对容器某个角对背景图片做偏移定位

background-position 的扩展语法方案

相关推荐

末点 / 0评论 2020-06-27