圆角
基本概念
border-radius: 1-4 个数字/1-4 个数字
前面是水平,后面是垂直
要是没有”/“则水平和垂直都一样
border-radius:10px/5px;
参数
- 各种长度单位都可以:px,%,….
- %有事很方便
- 但是宽度和高度一致时不太友好
用法
1 个 : 都一样
- border-radius: 一样
2 个: 对角
- border-radius:左上&右下 ,右上&左下
3 个: 斜对角
- border-radius: 左上 右上&左下 右下
4 个: 全部顺时针
- border-radius:左上 右上 右下 左下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>CSS3文本超出</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.box1 {
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 50%;
} /*圆形*/
.box2 {
width: 100px;
height: 400px;
border: 1px solid #ccc;
border-radius: 30px 50px 30px;
} /*上 右上和左下 右下*/
.box3 {
width: 100px;
height: 400px;
border: 1px solid #ccc;
border-radius: 30px 50px 30px 30px;
} /*上右下左*/
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>椭圆形:利用横轴和纵轴的比例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>CSS3文本超出</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.box1 {
width: 100px;
height: 300px;
border: 1px solid #ccc;
border-radius: 50px/150px;
} /*椭圆形*/
</style>
<body>
<div class="box1"></div>
</body>
</html>边框图片
- border-image: url() x 切 y 切 repeat||no-repeat
- url()对应的就是地址
- x 切这里千万不要加 px 对应的就是切图片上横轴的距离
- y 切这里千万不要加 px 对应的就是切图片上的纵轴的距离
- repeat 或者 round 一个表示重复一个表示平铺效果一样。no-repeat 表示不重复。
- 这里要想着加前缀
