圆角
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表示不重复。
- 这里要想着加前缀
