圆角边框 border-radius
border-radius 可以设置元素的外边距圆角
是一个简写属性,是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius 简写为一个属性
语法
border-radius: 50px;
/* 等价于 */
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
---------------------------------------
border-radius: 50px 40px 30px 20px;
/* 等价于 */
/* 顺时针方向赋值,左上 右上 右下 左下 */
border-top-left-radius: 50px;
border-top-right-radius: 40px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;
实例
1、画一个半圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 50px;
background: #ff008a;
<!-- 将角设为宽度的一般,即可得到正圆 -->
border-radius: 100px 100px 0 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、将正方形头像变成圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
<!-- 头像宽度是50px -->
border-radius: 25px;
}
</style>
</head>
<body>
<img src="img/tx.jpg">
</body>
</html>
盒子阴影 box-shadow
向框添加一个或多个阴影
语法
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset | 可选。将外部阴影(outset)改为内部阴影。 |
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
border: 10px solid red;
<!-- 第三个值越大,阴影越模糊 -->
box-shadow: 10px 10px 1px yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>