1、文本阴影
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/*
第一个10px 水平方向上的位移 可以是负值
第二个10px 垂直方向上的位移 可以是负值
第三个1px 模糊程度
第四个red 阴影的颜色
*/
/* 多个阴影在后边写,用逗号隔开 */
text-shadow: 10px 10px 1px red,0px 10px 1px yellow;
}
</style>
</head>
<body>
<div>
大家好
</div>
</body>
</html>
2、盒子阴影
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background: yellow;
margin: 0 auto;
/*
第一个-10px 水平方向上,正值即向右
第二个-10px 垂直方向,负值即往上
第三个 10px 模糊程度
第四个10px 阴影大小
red 阴影的颜色
多个阴影也是在后面加,利用逗号分隔开
*/
/* box-shadow: -10px -10px 10px 10px red ,10px 10px 10px rgb(21, 0, 255); */
/* 内阴影 */
box-shadow: 10px 10px 10px blue inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3、圆角边框
例子1
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
/*
圆角边框border-radius
单位px或者%
一个值v1 四个角一样
两个值v1,v2 左上右下 左下右上 一致
三个值v1,v2,v3 左上 左下右上 右下
四个值v1,v2,v3,v4 顺时针方向
*/
border-radius: 10px;
}
.box2{
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
/* border-radius: 10px 50px; */
/* 只实现一个方向的 */
/* 得保证垂直方向在前,水平方向在后 */
/* 左上角 */
border-top-left-radius: 10px;
/* 右上角 */
border-top-right-radius: 20px;
/* 左下角 */
border-bottom-left-radius: 60px;
/* 右下角 */
border-bottom-right-radius: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
例子2
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
/*
30px/60px 水平/垂直 这种写法只支持border-radius
*/
/* border-radius: 30px/60px; */
/* border-top-left-radius: 30px/60px; 不支持这种写法 */
border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
例子3
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 正方形里的圆 */
.box1{
width: 100px;
height: 100px;
margin: 0 auto;
background: green;
padding: 20px;
border: 20px solid red;
border-radius: 50%;
}
/* 半圆形 */
.box2{
width: 100px;
height: 50px;
background: blue;
margin: 0 auto;
border-radius: 50px 50px 0 0;
}
/* 扇形 */
.box3{
width: 100px;
height: 100px;
background: blueviolet;
margin: 0 auto;
/* 可以调节值改变扇形方向 */
border-radius: 100px 0 0 0;
}
</style>
</head>
<body>
<div class="box1"></div><br>
<div class="box2"></div><br>
<div class="box3"></div>
</body>
</html>
4、圆角案例
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0%;
padding: 0%;
}
input{
outline: none;
}
div{
width: 935px;
height: 120px;
border: 1px solid #dedede;
margin: 10px auto;
background: #ecebea;
border-radius: 15px;
box-shadow: 4px 11px 7px #bfbfbf,-4px 11px 7px #bfbfbf;
}
[type=text]{
width: 683px;
height: 86px;
margin: 17px;
border: 3px solid #cccccc;
border-radius: 4px;
font-size: 25px;
text-indent: 11px;
}
[type=submit]{
width: 200px;
height: 83px;
background: rgb(56, 189, 206);
border-radius: 5px;
border: 1px solid #5ca3b4;
font-size: 23px;
color: white;
}
</style>
</head>
<body>
<form action="">
<div>
<input type="text" placeholder="Search for CSS3,HTML5,JQuery...">
<input type="submit" value="GO">
</div>
</form>
</body>
</html>