CSSborder系列
⼀、border
关于border的3个属性，分别为border-width、border-style、border-color。
其中，border-color默认为元素内容的前景⾊；border-width默认为关键字medium，但是border-style默认值为none；所以，不指定border-style，边框将不存在。
关于border-color
transparent，据说特定情况下有奇效，需要知道有这样⼀个可选值。
white，⽩⾊的dotted边框，有时候会有奇效。
⽐如：
更确切地说，应该是颜⾊与⽗元素的背景颜⾊⼀样的dotted/dashed边框。
8种border-style：
（只有记住了，才能在需要的时候合理使⽤。）
关于mixed border
利⽤CSS的层叠，我们甚⾄可以为四个⽅向上的边框分别设置不同的宽度、样式和颜⾊，取决于具体情况。
⼩tips：边框模拟，等⾼布局
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>边框模拟等⾼布局</title>
6<style>
7            ainer {
8                margin-left: 200px;
9                overflow: hidden;
10            }
11
12            div.box {
13                width:300px;
14                float: left;
15
16            }
17
18            div.box1 {
19                background-color: brown;
20                border-right: 300px solid green;
21                margin-right: -300px;
22            }
23
24            p {
25                margin-bottom: 50px;
26            }
27
28</style>
29</head>
30<body>
31<div class="container">
32<div class="box box1">
33<p>box1</p>
34<p>box1</p>
35<p>box1</p>
36<p>box1</p>
37<p>box1</p>
38<p>box1</p>
39<p>box1</p>
40</div>
41<div class="box box2">
42<p>box2</p>
43<p>box2</p>
44<p>box2</p>
45</div>
46<div class="container">
47</body>
48</html>
View Code
其实现原理为：左列边框宽度与margin负值相结合，让右边框成为右列的背景。
⼆、border-radius
语法规则：
border-radius:a b c d; 顺序依次为上左、上右、下右、下左。（顺时针⽅向）
border-radius:a b c d/a b c d ；第⼀组为⽔平数值，第⼆组为垂直数值。
border-top-left-radius:a b; 单个圆⾓的设⽴。
（定义单个圆⾓时，⼀定要先上下、后左右，否则⽆效。）
注意：
圆⾓⽣效并不以边框的存在为前提，也就是说，即使没有边框，也能设⽴圆⾓。
⼩tips：border-radius:50%
三、border-image
与border-radius不同，border-image以border的存在为前提；其本质是将border-style替换成image。
语法规则：
border-image-source
⽀持none和url两种选择；（如果是none的话，下⾯就不⽤看了。。。）
div border属性border-image-slice
按top、right、bottom、left的顺序指定九宫格的切法；⽀持纯数字和百分数。
（纯数字⾃带px单位；百分数以图像的宽⾼为基准计算。）
fill，可选；默认情况下第九区是不显⽰的；指定了fill才会显⽰出来；在border-image-slice中指定。
border-image-width
按top、right、bottom、left的顺序指定border-image-width，覆盖border-width；可选。
经测试，border-image-width⼤于border-width时，会向内扩展（外⾯那条线不变，向⾥⾯扩展增加宽度），但是只是它的独⾓戏，除了它⾃⼰发⽣了变化之后，其它任何东西都不会变化；它会侵⼊padding区甚⾄内容区。
border-image-width⼩于border-width时，会向外收缩（外⾯那条线不变，⾥⾯这条线向外收缩），与padding区或者内容区留出空隙。
可以为0，即border-image不存在；但不能为负值。
（个⼈建议，此属性看看就好，就让它默认等于边框的宽度吧。）
border-image-outset
按top、right、bottom、left的顺序指定图像向外移动的距离；可选；⽀持像素距离和纯数字。
像素距离好理解，20px就是移动20px的意思；纯数字是指border-width的倍数。（注意，是border-width，不关border-image-width的事。）
请注意，这⾥⽤的是移动这个词，并不是扩展。
border-image-repeat
按top、right、bottom、left的顺序指定如何填充边框的空⽩；接受两个值，⼀个⽔平⽅向，⼀个垂直⽅向。
默认stretch（拉伸），可选repeat（重复）和round（平铺）。
这⾥只是⼀些我对这些属性使⽤⽅法上的总结，并没有对属性本⾝的含义与机制作出说明。
关于这5个属性的具体说明，推荐⼀篇⽂章，，写得很好，⾮常仔细，我这么⼩⽩都看懂了。
outline
outline-width、outline-style、outline-color；语法和表现都和border⼀样，但是不占任何⽂档空间。
outline-offset，定义outline和border（padding、content area）的距离，与margin没有关系。
四、box-shadow
语法规则：
h-shadow（必需，⽔平阴影的位置，可负）；
v-shadow（必需，垂直阴影的位置，可负）；
blur（可选，模糊距离）；
spread（可选，阴影的尺⼨）；
color（可选，阴影的颜⾊）；
outset（默认）/inset（可选，将外部阴影改为内部阴影）。
box-shadow应⽤
CSS：
2    width:200px;
3    height:100px;
4    background-color: #ccc;
5    border:10px solid red;
6    border-radius: 10px;
7    box-shadow: 0 0 0 10px green;
8 }
效果：
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title></title>
6<style>
7            body {
8                margin:0;
9            }
10
11            .container {
12                width:200px;
13                margin: 0 auto;
14                box-shadow: 0 4px 8px rgba(0,0,0,0.3),0 8px 16px rgba(0,0,0,0.5) ;
15            }
16
17            p {
18                position: absolute;
19                margin: -40px 0 0 50px ;
20            }
21
22</style>
23<body>
24<div class="container">
25<img src="imgsrc.baidu/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" /> 26<p>I am "萌萌哒".</p>
27</div>
28</body>
29</html>
View Code

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。