12.轮廓，阴影和圆角
作者：互联网
<!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-color: #bfa;
/* box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
第二个值 垂直偏移量 设置阴影的垂直位置 正值向下移动 负值向上移动
第三个值 阴影的模糊半径 值越大，阴影越模糊
第四个值 阴影的颜色
*/
box-shadow:20px 20px 50px rgba(0,0,0,.3);
}
/*
outline用来设置元素的轮廓线，用法和border一模一样
轮廓和边框不同的点，就是轮廓不会影响到可见框的大小（不会影响布局）
*/
.box1:hover{
outline:10px red solid;
}
.box2{
width:200px;
height:200px;
background-color: orange;
/* border-radius 用来设置圆角 圆角设置的圆的半径大小*/
/* border-top-left-radius:10px; */
/* x轴 y轴 */
border-top-right-radius:10px 20px;
/* border-bottom-left-radius */
/* border-bottom-right-radius */
/*
border-radius 可以分别指定四个角的圆角
四个值 左上 右上 右下 左下(顺时针)
三个值 左上 右上/左下 右下
两个值 左上/右下 右上/左下
*/
/* 四个角都是x轴20px、y轴40px */
/* border-radius:20px/40px; */
/* 将元素设置为一个圆形 */
/* border-radius:100px; */
/* border-radius:50%; */
}
</style>
</head>
<body>
<div class="box1"></div>
<span>hello</span>
<div class="box2"></div>
</body>
</html>
标签：圆角,12,阴影,radius,20px,轮廓,border,200px 来源： https://www.cnblogs.com/sherryyuan/p/16385149.html