边框阴影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>