第11章：CSS图形
11.1 图形简介
- 对于在页面上呈现的各种图形效果，很多小伙伴们首先想到的是用背景图片的方式来实现。但用图片来实现有两个很明显的缺点：1.图片总会比CSS代码体积大；2.每张图片都会引发一次HTTP请求。而为了网站的性能速度，我们应该秉承“少用图片”的 原则，通过CSS代码来实现图形效果。
- CSS代码实现的图形一般用于展示，如果想要实现便于JavaScript操作的图形，可以使用
canvas或SVG，这两种技术可以实现各种酷炫的动态图形效果，比如粒子碰撞、动感圆圈等。（类似Loading动画的动态图形效果）
11.2 三角形
11.2.1 普通三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.triangle{
/*第一步：定义盒子的大小为0*/
width: 0px;
height: 0px;
/*第二步：定义箭头方向的border厚度为三角形的高度以及颜色*/
border-top: 10px solid gray;
/*第三步：定义箭头两侧的border厚度为三角形的宽度并设置透明*/
border-left: 7px solid transparent;
border-right:7px solid transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
11.2.2 带边框的三角形
- 通过两个大小差1px的三角形进行嵌套，实现带边框的三角形。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.triangle{
position: relative;
left: 40px;
bottom: -1px;;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent gray transparent;
}
.triangle div{
position: absolute;
top: -8px;
left: -9px;
width: 0;
height: 0;
border-width: 9px;
border-style: solid;
border-color: transparent transparent beige transparent;
}
.content{
width: 100px;
height: 50px;
border:1px solid gray;
background-color: beige;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="triangle">
<div></div>
</div>
<div class="content"></div>
</body>
</html>
11.3 圆形
11.3.1 border-radius属性
- CSS3的
border-radius属性可以将元素绘制成圆形，属性值可以是px、百分比和em。
/*
* 当border-radius属性设置一个值时，相当于设置四个角的圆角程度
*/
border-radius:10px;
//等同于
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
boder-top-left-radius10px;
/*
* 当border-radius属性设置两个值时，相当于分别设置左上和右下的圆角程度
*/
border-radius:10px 20px;
//等同于
boder-top-left-radius:10px;
border-bottom-left-radius:20px;
/*
* 当border-radius属性设置三个值时，相当于分别设置左上、左下和右上、右下的圆角程度
*/
border-radius:10px 20px 30px;
//等同于
boder-top-left-radius10px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:30px;
/*
* 当border-radius属性设置四个值时，相当于分别设置左上、右上、右下、左下(顺时针)四个角的圆角程度
*/
border-radius:10px 20px 30px 40px;
等同于
boder-top-left-radius10px;
border-top-right-radius:20px;
border-bottom-left-radius:30px;
border-bottom-right-radius:40px;
11.3.1 实现半圆和圆
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div.half{
width: 100px;
height: 50px;
border: 1px solid black;
background-color: gray;
border-radius: 100px 100px 0 0;
}
div.round{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: gray;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="half"></div>
<div class="round"></div>
</body>
</html>
网友评论