轮廓
- outline:设置元素轮廓线,用法与border一样,但加上轮廓并不会影响到可见框的大小
- border与outline的不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于轮廓、阴影和圆点</title>
<style>
.boxOne{
width: 200px;
height: 200px;
background-color: palevioletred;
}
.boxOne:hover{
border: rgb(230, 159, 170) inset 10px;
/* outline: rgb(230, 159, 170) inset 10px; ; */
}
</style>
</head>
<body>
<div class="boxOne"></div>
<span>hello</span>
</body>
</html>
(1)border效果
(2)outline效果
阴影
-
box-shadow:设置元素阴影效果,默认情况下与原盒子重合
-
用法:box-shadow:a b c d;
a:水平偏移量,正值右移,负值相反
b:垂直偏移量,正值下移,负值相反
c:阴影模糊半径,值越大越模糊
d:阴影颜色 -
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于轮廓、阴影和圆点</title>
<style>
.boxOne{
width: 200px;
height: 200px;
background-color: palevioletred;
box-shadow:10px 10px 20px rgb(180, 51, 79);
}
</style>
</head>
<body>
<div class="boxOne"></div>
</body>
</html>
效果
圆角
- border-radius:设置圆角的半径大小
- 用法:
- 设置元素为圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于轮廓、阴影和圆点</title>
<style>
.boxOne{
width: 200px;
height: 200px;
background-color: palevioletred;
border-radius: 50% ;
}
</style>
</head>
<body>
<div class="boxOne"></div>
</body>
</html>