整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
背景知识：box-shadow，outline
鉴于使用场景的多元化，多重边框的设计越来越多，以往可以借助 border-image 属性应付一下，但是这个在css 代码层面并不是很灵活。现在我们借助 box-shadow 和 outline 两个属性来分别实现多重边框。
1、box-shadow 方案
思路：利用 box-shadow 的第四个参数（扩张半径）的大小，多重投影
代码示例：
<div class="border-multiple">
多重边框实现方案一：box-shadow
</div>
.border-multiple {
margin: 50px auto;
padding: 20px;
width: 600px;
background-color: #fff;
box-shadow: 0 0 0 10px #f0f,
0 0 0 15px #00f,
0 2px 15px 15px rgba( 0, 0, 0, .8);
}
多重边框--box-shadow
小结：
1、阴影并不影响布局，也不会受到box-sizing的影响
2、支持逗号分隔语法，可以创建任意数量的投影
3、缺点：只能实现实线的边框，不能实现其他样式的边框
2、outline 方案
代码示例：
<div class="border-outline">
多重边框实现方案二：outline
</div>
.border-outline {
margin: 200px auto;
padding: 20px;
width: 600px;
background-color: #ff0;
outline: 3px dashed #0f0;
outline-offset: -10px;
}
多重边框--outline
小结:
1、前提是实现两层边框
2、可能需要 outline-offset 的属性值
3、outline 的描边默认是矩形，当有圆角时会认为是 bug , 不能贴合圆角
4、不支持逗号语法
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
背景知识：box-shadow，outline
为了解决上面例子小结3中的bug，可以用box-shadow 扩张半径来填补掉 圆角与outline 之间的空隙。
代码示例：
<div class="inner-rounding">
需要借助 box-shadow、outline、“多重边框”来实现
注意点 ： box-shadow 的扩展半径应该是 圆角半径的 0.5倍
</div>
.inner-rounding {
background-color: #ccc;
margin: 50px auto;
padding: 20px;
width: 600px;
padding: 20px;
border-radius: 20px;
box-shadow: 0 0 0 10px #f00;
outline: 10px solid #f00;
}
注意点 ： box-shadow 的扩展半径应该是 圆角半径的 0.5倍；严格来说应该是(√2 - 1) 倍，这里取 0.5 倍是为了更好的计算
边框内圆角
背景知识：rgba 或 hsla 颜色属性，background-clip
思路：让边框呈现在 被裁剪背景的 padding-box 里
代码示例：
<div class="border-opacity">
半透明边框的实现
</div>
.border-opacity {
margin: 50px auto;
padding: 20px;
width: 600px;
border: 10px solid hsla(0, 0%, 100%, 0.5);
background-color: #fff;
background-clip: padding-box;
}
小结：
半透明边框的实现需要借助css3的 background-clip 的属性
background-clip有三个属性：
1、border-box: 背景被裁剪到边框盒（看不到边框）
2、padding-box: 背景被裁剪到内边距框（可以看见边框）
3、content-box: 背景被裁剪到内容框（边框紧贴着内容）
半透明边框效果图
背景知识：css 渐变，基本的border-iamge，background-clip
先来看看 border-image 是如何来实现 图像边框的:
border-image 的实现原理是九宫格伸缩法：把图片切割成九块，然后把它们应用到元素边框相应的边和角。
代码示例：
<p class="border-image">border-image 的实现原理是九宫格伸缩法：把图片切割成九块，然后把它们应用到元素边框相应的边和角。</p>
<p class="border-image">我们并不想让图片的某个特定部分固定在拐角处；而是希望出现在拐角处的图片区域是随着元素宽高金额边框厚度的变化而变化的。</p>
.border-image {
border: 40px solid transparent;
border-image: 33.334% url("http://csssecrets.io/images/stone-art.jpg");
padding: 1em;
max-width: 20em;
font: 130%/1.6 Baskerville, Palatino, serif;
}
.border-image:nth-child(2) {
margin-top: 1em;
border-image-repeat: round;
}
border-image 效果图
缺点：我们并不想让图片的某个特定部分固定在拐角处；而是希望出现在拐角处的图片区域是随着元素宽高金额边框厚度的变化而变化的。
如何解决呢？
实现思路：
1、利用 css 渐变和背景的扩展
2、在背景图片上，在叠加一层纯白的实色背景
3、为了让下层的背景透过边框区域显示出来，需要给两层背景指定不同的 background-clip 值
4、在多重背景的最底层设置背景色，需要用一道从白色过渡到白色的 css 渐变来模拟出纯白色实色背景的效果
代码示例：
<p class="contituous-images">实现思路：
1、利用 css 渐变和背景的扩展
2、在背景图片上，在叠加一层纯白的实色背景
3、为了让下层的背景透过边框区域显示出来，需要给两层背景指定不同的 background-clip 值
4、在多重背景的最底层设置背景色，需要用一道从白色过渡到白色的 css 渐变来模拟出纯白色实色背景的效果
</p>
.contituous-images {
padding: 1em;
border: 1em solid transparent;
/* background: linear-gradient(white, white),
url(http://csssecrets.io/images/stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box; */
/* background 还可简写如下 */
background: linear-gradient(white, white) padding-box,
url(http://csssecrets.io/images/stone-art.jpg) border-box 0 / cover;
width: 21em;
padding: 1em;
overflow: hidden;
/* 边框可拖拽 */
resize: both;
font: 100%/1.6 Baskerville, Palatino, serif;
}
连续的图像边框
还可以通过渐变图案实现信封样式的边框
代码示例：
<p class="envelope-border">还可以通过 渐变图案实现 信封样式的 边框</p>
.envelope-border {
padding: 1em;
border: 0.5em solid transparent;
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 3em 3em;
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}
信封边框效果图
作者：贵在随心
链接：https://www.jianshu.com/p/273e77cb99c6
. block(区块)
block面板主要是设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。
(1)word-spacing：设置单词之间的间距。可以设置负值。
默认值:normal
(2)letter-spacing：设置字符之间的间距。可以指定负值。因为中文也是字符, 这个参数可以设置文字间的间距。
默认值:normal
(3)vertical-align：指定元素的垂直对齐方式。针对<td>表格设置垂直对齐方法,但是对<div>设置无效,可以将display属性设置为table-cell值;
可以指定sub(下标)、super(上标)、top(与顶端对齐)、middle(居中)、bottom(与底端对齐)等。适用于行内块元素 img、input、td等
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
默认值: baseline
(4)text-align：设置文本的排列方式(适用于行内元素和行内块元素, 如 a、span、input、img、label等元素)。left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)。也可用于<hr/>下划线对齐方式
默认值： 如果 direction 属性是 ltr, 则默认值是 left；如果 direction 是 rtl，则为 right。(关于CSS direction 属性看下面的内容介绍)
text-align 和margin auto 区别
text-align 可以让块级元素里面的文字内容居中对齐.
文字内容==(图片 input 行内元素 行内块元素)
但是对于里面的块级元素无效
让一个块级元素居中对齐 ： margin:0 auto;
(5)text-indent：设置文本第一行的缩进值。负值用于将文本第一行向外拉, 主要给<p>设置首行。
要在每段前空两格,可设置为2em，因为em是当前字体尺寸，2em就是两个字的大小。
默认值： not specified(没有规定的)
p{font-size:12px;text-indent:2em;}上述代码就是可以实现段落首行缩进24px(也就是两个字体大小的距离)。
(6)white-space：设置如何处理元素内的空白符。有三个选项可选：
normal 会将空白符全部压缩；
pre 则会如同处理pre标签内的文本一样处理这些空白符,也就是说，所有的空白符，包括空格，标签，回车，等都会得以保留；
nowrap 指定文本只有遇到br标签时才换行。
默认值: normal
(7)display: none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认值。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>)，表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>)，表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
默认值： inline
常用的属性:
display:none; //隐藏
display:block //显示(将行内元素转换为块元素)
dispaly:inline //将块元素转换行内元素
dispaly:inline-block //将块元素转换为行内块元素
display:table-cell; //此元素会作为一个表格单元格显示(类似 <td> 和 <th>) 用于多行文本、块元素垂直居中以上转换涉及行内块元素(img、input)转换;
经过大量的测试证明：属性display是不能用于转换行内块元素(img、input)
同义词: 内联元素(行内元素)
4. box(方框或盒子) 主要针对图片、表格、层、段落(p)、标题(h1-h6)等
box面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。
(1)width：定义元素的宽。
默认值:auto
(2)height：定义元素的高。
默认值:auto
以上width、height属性如果是针对div标签设置css样式，则与定位设置窗口width、height属性一致(Dreamweaver会自动填充数据)
在父元素和子元素都设置了高度和宽度的情况下：
如果子元素的宽度超出了它的父元素的宽度, 则会父元素不会限制其显示宽度;
如果子元素的高度超出了它的父元素的高度, 则会父元素不会限制其显示高度;
(3)float：定义元素的漂浮方式。left 表示对象浮在左边、right表示对象浮在右边、none 表示对象不浮动。
默认值:none
一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。
也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了。无论它原来是个div还是个span。
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
(4)clear：不允许元素的漂浮，相对于前一个<div>设置浮动时，下一个有清除设置的元素就会移到它的下面。
left表示不允许左边有浮动对象 right表示不允许右边有浮动对象
none 表示允许两边都可以有浮动对象 both 不允许有浮动对象。
默认值:none
浮动的主要作用是将块元素排在同一行(span也可以设置浮动);
浮动元素它会向左或者向右进行浮动, 所谓浮动可以理解"飘";
浮动元素向它遇到父元素的边框就停止浮动;
浮动元素的层级会比普通元素要高, 并且它不会再占用原有的高度;
浮动元素只会影响后面的元素, 不会影响前面的元素：
浮动元素的后面的元素(可能是一个也可能是多个元素受到影响)也会继承浮动元素的特性, 它也会浮动了要解决这个问题有两办法;
第一个：需要清除浮动
第二个：给父元素设置一个高度(子元素都设置了height高度条件下), 不建议使用
清除浮动后它不会影响到它后面的元素, 父元素会将所有的浮动元素包围者
当然浮动元素对后面的元素的影响可以做首字母方法, 图文混排(文字环绕图片)等特效；
(5)padding：定义元素内容与其边框的空距(如果元素没有边框就是指页边的空白)。
可以分别设置分别设置上、右、下、左内边距。
padding-top
padding-right
padding-bottom
padding-left
p {padding:20px} 设置设置上、右、下、左内边距都为20px
p {margin: 20px 30px 30px 20px;} 设置padding-top padding-right padding-bottom padding-left分别为20px 30px 30px 20px
默认值：0。
要懂得, 用小属性层叠大属性：
padding: 20px;
padding-left: 30px;
注意：大属性要写在前面, 小属性写在后面;
比如：
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}padding-left:10px和padding-right:20px没用, 因为后面的padding大属性, 层叠覆盖了。
(6)margin：定义元素的边框与其他元素之间的距离(如果没有边框就是指内容之间的距离)。
可以分别设置上边界、右边界、下边界、左边界的值。
margin-top
margin-right
margin-bottom
margin-left
p {margin:20px}
p {margin:10px 0px 15px 5px;}
默认值：0
marign：上边界值 右边界值 下边界值 左边界值
margin属性值必须按照上面顺序进行排列,以空格分开。如果仅输入一个值,则4个边界值会同时设置为此值。
如果仅输入两个的值,则缺少的值会以对边的设置值进行替代。例如：
div{margin:5px 10px 15px 20px} /*上=5px,右=10px,下=15px,左=20px*/
div{margin:5px} /*上=5px,右=5px,下=5px,左=5px*/
div{margin:5px 10px} /*上=5px,右=10px,下=5px,左=10px*/
div{margin:5px 10px 15px} /*上=5px,右=10px,下=15px,左=10px*/
5. border(边框) 针对段落(p标签)、图片、表格、标题(h1-h6)、form、input等(几乎所有的元素都可以设置边框)
border面板可以设置对象边框的宽度、颜色及样式。
(1)border-width：设置元素边的宽度。可以分别设定top(上边宽)、right(右边宽)、bottom(下边宽)、left(左边宽)的值。
border-top-width border-right-width border-bottom-width border-left-width
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。
默认值: medium
(2)border-color：设置边框的颜色。你可以分别对每条边设置颜色。
注意：我们可以通过设置不同的颜色做出亮边和暗边的效果，这样元素看起来是立体的。
border-top-color border-right-color border-bottom-color border-left-color
默认值: not specified(未规定的)
(3)border-style：设置边框样式。
border-top-style border-right-style border-bottom-style border-left-style
可以设置为none(无边框)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、
groove(凹槽,3D凹线)、ridge(凸槽,3D凸线)、inset(凹边,3D嵌入线)、outset(凸边,3D浮出线)等边框样式。
默认值:none(无边框)
推荐：表单输入框：inset(凹边) 按钮：outset(凸边)
兼容性问题
比如, border:10px ridge red; 在chrome和firefox、IE中有细微差别：
如果公司里面的设计师, 处女座的, 追求极高的页面还原度, 那么不能使用css来制作边框。
就要用到图片, 就要切图了。所以, 比较稳定的就几个：solid、dashed、dotted, 其他的边框样式尽量不要用。
border可以没有： border: none;
某一条边没有： border-left: none;
也可以调整左边边框的宽度为0px： border-left-width: 0px;
注意：border-bottom-style：可以修改a链接的"下划线"的风格
border-bottom-width：可以修改a链接的"下划线"的宽度(粗细)
border-bottom-color：可以修改a链接的"下划线"的颜色
节我们来学习边框样式，主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时，可以分为上下左右四个边框，既可以同时设置四个边框的样式，也可以分开设置四个边框的样式。
关于边框样式的四个属性：
border-width 属性用于设置边框的宽度，也就是边框的粗细。
常用属性值如下所示：
我们一般会使用 length 作为 border-width 属性的属性值，即设置边框的粗细为多少像素，例如 1px、2px、3px 等。border-width 属性可以同时为所有边框设置宽度，也可以单独地为每个边框设置宽度。
示例：
为上、右、下、左四个边框分别设置边框粗细：
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
根据简写属性 border-width，我们也可以直接写成：
border-width:1px 2px 3px 4px;
记住在简写时，为边框设置宽度的顺序为 上、右、下、左，是顺时针顺序。
而当元素的上下边框或左边框的宽度一致时，也可以使用简写，例如上下边框为1px、左右边框为2px，可以写成：
border-width:1px 2px;
border-style 属性用于设置元素的边框样式。和 border-width 一样，可以同时为四个边框设置边框样式，也可以分别为每个边框单独设置边框样式。
border-style 的属性值有很多个，但是在实际网页制作中，常用属性值有下面四种：
示例：
例如设置上、右、下、左的边框样式为实线、虚线、实线、虚线：
border-top-style:solid;
border-right-style:dashed;
border-bottom-style:solid;
border-left-style:dashed;
可以简写成：
border-style: solid dashed solid dashed;
当元素的上下边框和左右边框样式一致时，也可以写成：
border-style: solid dashed;
border-color 属性可以用于设置边框颜色。属性值可以是任何合法的颜色值，例如颜色名、十六进制颜色值、RGB颜色值等。
border-color 属性同样可以同时设置四个边框的颜色，也可以单独设置四条边框的颜色。
例如设置上、右、下、左边框颜色为红黄蓝绿：
border-top-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-left-color:green;
可以简写为：
border-color:red yellow blue green;
上面我们讲了 border-width、border-style、border-color 三个属性，但是其实我们在实际应用中，一般不会单独来设置边框宽度或者颜色等，而是直接使用通过 border 简写属性来设置所有的边框属性。
border 属性可以直接设置所有边框的样式，如果要单独设置每个边框的样式则可以使用 border-top、border-right、border-bottom、border-left。
将下面这个<div> 标签的边框设置成 3像素、虚线、紫色：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>设置一个边框</div>
</body>
</html>
CSS 样式代码：
div{
width: 100px;
height: 100px;
border:3px dashed purple;
}
在浏览器中的演示效果：
链接：https://www.9xkd.com/
*请认真填写需求信息，我们会在24小时内与您取得联系。
