轮廓
看两份代码
<!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;
background-color: #bfa;
border: 10px red solid;
}
</style>
</head>
<body>
<div class="box1"></div>
<span>Hello</span>
</body>
</html>
<!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;
background-color: #bfa;
outline: 10px red solid;
}
</style>
</head>
<body>
<div class="box1"></div>
<span>Hello</span>
</body>
</html>
看到了吧,用outline并不会把span元素挤下去,即不会影响box1的可见框。
这个outline可以用在:hover,当鼠标移入时,添加轮廓。
阴影
设置元素阴影的是box-shadow,它不影响元素布局。
如果写下面代码,
<style>
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
box-shadow: black;
}
</style>
并不能看到阴影,因为它在盒子的下方。
所以设置两个偏移量,看下面代码
box-shadow:10px 10px black;
第一个是水平的, 第二个是垂直的。如果想往左或往上移动,可以设置负值。
可以用rgba设置颜色和透明度,这样更好看,但是边缘太清晰了,如果想有模糊效果,可以再添加一个模糊半径值在颜色前面,如下
<style>
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
box-shadow:10px 10px 10px rgba(0,0,0,0.5);
}
</style>
圆角
如果我们想给盒子弄成圆角,要如何操作?
用border-radius。
如果想单独设置某个角,可以用如下四个。
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
如果写如下代码
<style>
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
border-top-left-radius: 10px;
}
</style>
这里10px表示圆弧的半径为10px。
如果设置两个参数,则是一个椭圆弧。
还可以用百分比。
此外,直接用border-radius可以一次性设置四个,用法和之前的一样。这里如果想设置椭圆,则用/隔开。