<!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>轮廓阴影圆角</title>
<style>
/*
一、轮廓
outline 设置元素的轮廓
使用方式与border一样、不同在于不影响盒子大小
设置轮廓为元素起到一个突出强调的作用
二、阴影
box-shadow 设置元素的阴影
第一个值：设置阴影水平距离
第二个值：设置阴影垂直距离
第三个值：设置阴影模糊半径
第四个值：设置阴影尺寸
第五个值：设置阴影的颜色
第六个值：设置内部还是外部阴影，
outset 默认值为外部阴影
inset 设置为内部阴影
三、圆角
border-radius设置元素的圆角的
可以设置四个角的圆角
border-top-left-radius
border-top-right-radius
border-button-right-radius
border-button-left-radius
border-radius 可以直接设置四个角
border-radius：50px 100px 150px 200px；左上 右上 右下 左下（顺时针）
border-radius：50px 100px 150px；左上 右上 左下 右下
*/
.box1{
width: 200px;
height: 200px;
background-color: #c7edcc;
margin:100px auto;
/*设置轮廓*/
outline: 10px solid red;
/*设置阴影
box-shadow: 30px 30px 50px 5px rgba(0,0,0,.3);
*/
/*设置圆角
border-radius：50px 100px 150px 200px；
border-radius：50px 100px 150px；
*/
position: relative;
top: 0;
left: 0;
transition: 0.3s linear all;
}
.box1:hover{
box-shadow: 0px 0px 20px black;
top: -1px;
left: 0;
}
/*
.box2{
width: 300px;
height: 200px;
background-color: #fed6e0;
}
*/
</style>
</head>
<body>
<div class="box1"></div>
<!--<div class="box2"></div>-->
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)