1. 轮廓
outline
设置元素的轮廓
使用方式与border
一样。不同在于不影响盒子的大小
2. 阴影
box-shadow
设置元素的阴影box-shadow: 30px 30px 50px 5px rgba(0, 0, 0, .5);
第一个值:设置阴影水平距离
第二个值:设置阴影垂直距离
第三个值:设置阴影的模糊半径
第四个值:设置阴影的尺寸
第五个值:设置阴影的颜色
第六个值:设置内部还是外部阴影outset
默认值,为外部阴影inset
设置为内部阴影
3. 圆角
border-radius
设置元素的圆角
可以设置四个角的圆角border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius
可以直接设置四个角border-radius: 50px 100px 150px 200px;
左上 右上 右下 左下(顺时针)border-radius: 50px 100px 150px;
左上 右上左下 右下文章来源:https://www.toymoban.com/news/detail-826113.html
示例如下:文章来源地址https://www.toymoban.com/news/detail-826113.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outline, shadow, rounded corners</title>
.box1 {
width: 200px;
height: 200px;
background-color: #c7edcc;
margin: 100px auto;
/* 设置轮廓 */
/* outline: 10px solid red; */
/* 设置阴影 */
/* box-shadow: 30px 30px 50px 5px rgba(0, 0, 0, .5); */
/* 设置圆角 */
/* border-radius: 50px 100px 150px 200px; */
/* border-radius: 50px 100px 150px; */
border-radius: 50%;
}
/* .box2 {
width: 300px;
height: 200px;
background-color: #fde6e0;
} */
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
到了这里,关于re:从0开始的CSS之旅 12. 轮廓、阴影、圆角的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!