CSS3之box-shadow(阴影)和border属性

CSS3的一些属性（一）

一、box-shadow(阴影)
二、border属性

一、box-shadow(阴影)

1、格式：inset/outset 水平偏移量垂直偏移量模糊范围传播距离阴影颜色；

inset（内阴影，必写）outset（外阴影，可不写）
模糊范围（阴影的模糊值）：阴影的大小是基于原来的位置向两侧同时模糊
传播距离：在水平方向和垂直方向同时增加阴影的大小

2、哪个阴影最先设置的，哪个阴影就在逻辑的最上面。
阴影是在文字的下面，在背景颜色的上面

小练习1：

<!DOCTYPE html>
<html lang="zn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>border练习</title><style>*{padding:0px;margin:0px;}body {background-color: #000;}div{width:200px;height:200px;position: absolute;top:calc(50% - 150px);left:calc(50% - 150px);border:1px solid black;box-shadow:inset 0px 0px 20px #fff,5px 0px 35px #f0f,0px -5px 35px #00f,-5px 0px 35px rgb(247, 14, 33),0px 5px 35px #fcc309;}</style>
</head>
<body><div></div>
</body>
</html>

效果如下，具体每个边框想设置什么自己可以随意改，此处只是用来练练手，学会怎么使用这个属性

小练习2：

<!DOCTYPE html>
<html lang="zn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>border练习</title><style>* {padding:0px;margin:0px;}body {background-color: #000;}div {width:300px;height:300px;border-radius:50%;position:absolute;top:calc(50% - 150px);left:calc(50% - 150px);border:1px solid #fff;box-shadow:inset 0px 0px 30px  #fff,inset 3px 0px 40px #f0f,inset -3px 0px 40px #0ff,inset 3px 0px 120px #f0f,inset -3px 0px 120px #0ff,0px 0px 50px  #fff,-3px 0px 65px #f0f,3px 0px 65px #0ff;}</style>
</head>
<body><div></div>
</body>
</html>

效果如下

小练习3：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习</title><style>* {padding: 0px;margin: 0px;}body {background-color: #000;}div {width: 50px;height: 50px;background-color: #fff;position: absolute;top: calc(50% - 25px);left: calc(50% - 25px);border-radius: 50%;box-shadow: 0px 0px 100px 95px #fff,0px 0px 200px 150px #ff0;}</style>
</head>
<body><div></div>
</body>
</html>

效果图

小练习4：当你鼠标移入正方形是，正方形出现阴影并变大，移出之后又恢复，中间都有个过渡的时间

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习</title><style>* {padding: 0px;margin: 0px;}body {background-color: #000;}/* 鼠标移入则变大有阴影，移除恢复 */div {width: 100px;height: 100px;border-radius: 5px;position: absolute;top: calc(50% - 50px);left: calc(50% - 50px);border: 1px solid #fff;box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);transition: all .6s;}div::after {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 5px;box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);opacity: 0;transition: all .6s;}div:hover {transform: scale(1.25 1.25);}div:hover::after {opacity: 1;}</style>
</head>
<body><div></div></body>
</html>

二、border属性

1、border-radius属性
里面有四个值：top-left、top-right、bottom-right、bottom-left
也可以是三个值：top-left、top-right和bottom-left、bottom-right
还可以是两个值：top-left和bottom-right、top-right和bottom-left

border-top-right-radius:300px（水平） 300px（垂直）;和border-top-right-radius:300px;样式相同，可以改变水平和竖直方向的大小而改变形状
放在正方形中时，得到一个四分之一的圆，不同的图形中展现的效果不同

2、border-image属性
2.1格式：border-image-source | [ border-image-slice,border-image-width,border-image-outset] | border-image-repet; 一般建议分开写，有利于维护和开发，便于记忆。
连在一起我们一般都是border-image:source slice repeat; 其他的都是分开写

border-image-source:：使用绝对或相对地址( url() )或者创建渐变色linear-gradient(red, yellow)来确定图像。

border-image-slice(能添四个值，不可带px，只能写纯数字)
该属性指定从上，右，下，左 4 个方位来分割图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字fill。

border-image-outset：边框图像向外偏移的距离

border-image-width：设置body里面能显示的图片背景的宽度，它的默认值是1，所以该属性的计算值会是1 * border-width，相当于会直接使用border-width的定义。
特殊点：如果添的是auto，那么它会向slice看齐，取slice的值+px。

border-image-repeat：[ stretch（默认值） | repeat | round | space ]，可以一次添两个参数
stretch：将被分割的图像使用拉伸的方式来填充满边框图像区域。
repeat：将被分割的图像使用重复平铺的方式来填充满边框图像区域。当图像碰到边界时，如果超过则被截断。
round：与 repeat 关键字类似。不同在于，当背景图像不能满足被新增一个块时，会根据情况缩放图像。（先拉伸再平铺或者先压缩再平铺）
space：与 repeat 关键字类似。不同在于，当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（会用空白间隙填充在图像周围再平铺）