目录
一、圆角（border-radius）
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角“
border-radius 属性，可以使用以下规则：
•1 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
•2 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
•3 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
•4 一个值： 四个圆角值相同
设置100%/50%就变成了圆形
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
.box{
width: 100px;
height: 100px;
background-color: blue;
border-radius: 20%;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
二、阴影（box-shadow）
box-shadow 向框添加一个或多个阴影。
Blur模糊度
box-shadow:h-shadow v-shadow blur color;
| h-shadow | 必选，水平阴影的位置 |
| v-shadow | 必选，垂直阴影的位置 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
.box{
width: 100px;
height: 100px;
background-color: blue;
margin:50px;
box-shadow: 10px 10px green;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
