CSS3--边框阴影/圆角/渐变

边框阴影box-shadow:

阴影有内阴影和外阴影之分，默认都是外阴影。
box-shadow: 水平偏移垂直偏移阴影半径阴影扩展阴影颜色内外阴影;
快速添加阴影只需要编写三个参数即可：box-shadow: 水平偏移垂直偏移阴影半径;
默认情况下阴影的颜色和盒子内容的颜色一致

        .box1{width: 200px;height: 200px;background-color: red;margin: 100px auto;text-align: center;line-height: 200px;box-shadow: 10px 10px 10px;color: yellow;}

文字阴影 text-shadow:

text-shadow: 水平偏移垂直偏移阴影半径阴影颜色 ;

text-shadow: 10px 10px 10px;
color: purple;

边框圆角border-radius：将边框的直角变成圆角

在边框的四个顶点，分别在四条边上，按照指定的像素值（百分比）找到各自距离顶点的距离和圆心，绘制圆弧。

            /*border-radius: 0px 0px 0px 100px;  按照左上/右上/右下/左下的顺序*/当省略某一个参数，会参考他的对角/*border-radius: 100px 80px 40px;  如果省略一个参数, 会变成对角的值 *//*border-radius: 100px 80px;    如果省略两个参数, 会变成对角的值*//*border-radius: 100px;  如果省略三个参数, 其它角会和它一样*//*border-radius: 100px; 如果指定的半径是当前元素宽高的一半, 那么就是一个圆形*//*border-radius: 50%;*/

注：
1.当边框圆角的值 > 边框宽度，外边框和内边框都会变成圆角
2. 当边框圆角的值 <= 边框宽度，只有外边框会变成圆角，内边框依旧是直角

            width: 200px;height: 200px;border: 20px solid #000;margin: 100px auto;border-radius: 40px; 边框圆角大于边框宽度，内外边框都变成圆角

         border: 20px solid #000;margin: 100px auto;border-radius: 20px; 边框圆角<=边框值，内边框依旧是直角

单独设置某个角的半径border–xx–xx–radius

设置椭圆：水平方向的半径是宽度的一半，垂直方向的半径是高度的一半

如果传递两个参数：第一个参数是水平方向的半径，第二个参数是垂直方向的半径width: 200px;height: 100px;border: 1px solid #000;margin: 100px auto;border-top-left-radius: 100px 50px;border-top-right-radius: 100px 50px;border-bottom-left-radius: 100px 50px;border-bottom-right-radius: 100px 50px;简写形式：/* 斜杠之前的代表左上/右上/右下/左下的水平方向的半径斜杠之后的代表左上/右上/右下/左下的垂直方向的半径 *//*border-radius: 100px 100px 100px 100px / 50px 50px 50px 50px;*//*border-radius: 100px / 50px;*/

圆角练习–太极图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.out{width: 400px;height: 400px;background: skyblue;box-sizing: border-box;margin: 100px auto;position: relative;}.top{width: 400px;height: 200px;box-sizing: border-box;border-top-left-radius: 200px;border-top-right-radius: 200px;background: white;}.bottom{width: 400px;height: 200px;box-sizing: border-box;border-bottom-left-radius: 200px;border-bottom-right-radius: 200px;background: black;}.left{position: absolute;left: 0;top: 100px;height: 200px;width: 200px;background: white;border: 60px solid black;border-radius: 100px;box-sizing: border-box;}.right{position: absolute;right: 0;top: 100px;height: 200px;width: 200px;background:black;border: 60px solid white;border-radius: 100px;box-sizing: border-box;}</style>
</head>
<body>
<div class="out"><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div>
</div>
</body>
</html>

圆角练习–跳动的心

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.out{margin: 100px auto;width: 450px;height: 400px;position: relative;animation: change 1s linear 0s infinite normal;}.left, .right{height: 250px;width: 250px;background: red;border-radius: 50%;position: absolute;top: 0;box-shadow: 0 0 40px red;}.left{left: 0;}.right{right: 0;}.bottom{height: 250px;width: 250px;background: red;position: absolute;bottom: 50px;left: 50%;margin-left: -125px;transform: rotate(45deg);box-shadow: 0 0 40px red;}@keyframes change {0%{transform: scale(1);}50%{transform: scale(1.2);}100%{transform: scale(1);}}</style>
</head>
<body>
<div class="out"><div class="left"></div><div class="right"></div><div class="bottom"></div>
</div>
</body>
</html>

边框图片border-image

参考文章
border-image-source 指定边框图片资源
border-image-slice 需要 4 个参数值，依次指定 top、right、bottom、left 这 4 个方向上的切割宽度。注意：不需要单位。
border-image-width 指定边框图片的显示宽度，默认的边框宽度会失效
border-image-repeat 边框图片四个角以外的图片如何填充, 默认是拉伸
border-image-outset 需要四个参数指定上右下左四个方向边框图片外移多少
简写：

/*border-image: 资源地址 切割方式 填充模式;*/
border-image: url("images/border.jpg") 70 fill round;

线性渐变和径向渐变

          /*线性渐变: 默认从上至下  background: linear-gradient(red, green);径向渐变: 默认从中心点向四周扩散 background: radial-gradient(red, green);*//*线性渐变: 可以通过to 关键字的方式修改渐变的方向background: linear-gradient(to top right ,red, green);径向渐变: 可以通过at 关键字的方式修改开始渐变的位置background: radial-gradient(at top left ,red, green);*//*线性渐变: 可以通过 角度deg的方式修改渐变的方向background: linear-gradient(90deg,red, green);径向渐变: 可以通过at 位置 位置的方式修改开始渐变的位置background: radial-gradient(at 200px 100px ,red, green);*//*线性渐变可以指定纯色和渐变的范围只有第一个颜色后面的范围是指定纯色的范围, 后面的都是指定渐变的范围background: linear-gradient(to right, red 100px, green 200px, blue 300px);水平方向从左到右0-100px是纯红色，100px到200px是红色到绿色渐变，200px到300px是绿色到蓝色的渐变，300px到最右边的纯蓝色没有渐变。径向渐变可以指定扩散的范围background: radial-gradient(100px, red, green);从中心点向外扩散100px是红色到绿色的渐变，半径100px之外的区域是纯绿色没有渐变。*//*注意点:如果需要同时指定扩散的位置和扩散的范围, 那么范围必须写到at前面*/background: radial-gradient(100px at 200px 100px ,red, green);

线性渐变练习–卡拉ok

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;}div{margin: 100px auto;height: 80px;width: 800px;border: 1px solid black;line-height: 80px;font-size: 75px;font-weight: bold;color: transparent;background: red;-webkit-background-clip: text;background-image: url("images/text_bg.jpg");background-repeat: no-repeat;background-position: -800px 0;animation: move 5s linear 0s infinite normal;}@keyframes move {from{background-position: -800px 0;}to{background-position: 800px 0;}}</style>
</head>
<body>
<div>伤过的心,就像玻璃碎片
</div>
</body>
</html>

线性渐变练习