轮廓和圆角：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮廓和圆角</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #BBFFAA;
/*box-shadow用来设置元素的的阴影效果，阴影不会影响页面布局*/
/*
第一个值：水平偏移量（相当于margin-left）；
第二个值：垂直偏移量；
第三个值：阴影的模糊半径
第四个值：阴影颜色
*/
box-shadow: 10px 7px 30px rgba(0,0,0,0.3);
/*
outline 用来设置元素的轮廓线，用法和border一模一样
轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
*/
}
.box1:hover{
outline: 10px red solid;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
/*border-radius: ;用来设置圆角
四个值：左上 右上 右下 左下
三个值：左上 右上/左下 右下
两个值：左上/右下 右上/左下
*/
/*
x y
border-top-left-radius
border-top-right-radius
*/
border-radius: 50px / 20px;
}
.box3{
width: 200px;
height: 200px;
background-color: rosybrown;
/*将元素设置为一个圆形*/
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box1"></div>
<span>hello</span>
<div class="box2"></div>
<br />
<div class="box3"></div>
</body>
</html>
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
