Alisa0 2019-06-30
思路:实际是设置的背景会延伸到边框所在的区域的下层,可以通过background-clip属性调整背景的默认行为。
background-clip 属性:背景的绘制区域
值 | 描述 |
---|---|
border-box | 背景被裁剪到边框盒 |
padding-box | 背景被裁剪到内边距框 |
content-box | 背景被裁剪到内容框 |
border: 20px solid hsla(0, 0%, 100%, .5); background: #fff; background-clip: padding-box;
思路:利用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);
注意:
思路:只需要两层边框,可以先设置一层常规边框,再加上outline(描边)属性产生外层边框。优点:边框样式十分灵活。缺点:只适用于双层边框的场景;边框不一定会贴合border-radius属性产生的圆角。
outline属性:是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
值 | 描述 |
---|---|
outline-color | 规定边框的颜色 |
outline-style | 规定边框的样式 |
outline-width | 规定边框的宽度 |
background: yellowgreen; outline: 5px solid deeppink;
设置box-radius值效果:
通过设置outline-offset属性控制它与元素边缘之间的距离
background: #485152; outline: 1px dashed #fff; outline-offset: -10px;
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...