您的位置：首页 > Web前端 > CSS

CSS3-边框 border

2019-09-21 23:38 1631 查看

一、圆角效果 border-radius

　　使用方法：

　　border-radius:10px; /* 所有角都使用半径为10px的圆角 */

　 border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

　不要以为border-radius的值只能用px单位，你还可以用百分比或者em。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>border-radius</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: aquamarine;
border-radius: 5px;
}

#box1 {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}

#box2 {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 5px 10px 20px 30px;
}

#box3 {
width: 50px;
height: 100px;
background-color: coral;
border-radius: 50px 0px 0px 50px;
}
</style>
</head>

<body>
<h4>为正方形添加圆角效果</h4>
<div id="box"></div>

<br>

<h4>实心圆</h4>
<div id="box1"></div>

<br>

<h4>为正方形4个角分别添加不同的圆角幅度</h4>
<div id="box2"></div>

<br>

<h4>半圆</h4>
<div id="box3"></div>
</body>

</html>

border-radius实用

二、边框阴影 box-shadow

　　box-shadow是向盒子添加阴影。支持添加一个或者多个。 语法： 　　 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 　　参数介绍：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>box-shadow</title>
<style>
#box {
width: 100px;
height: 100px;
box-shadow: 4px 2px 6px #333333;
}

#box1 {
width: 100px;
height: 100px;
box-shadow: 4px 2px 6px #333333 inset;
}

#box2 {
width: 100px;
height: 100px;
box-shadow: 4px 2px 6px #f00,
-4px -2px 6px #000,
0px 0px 12px 5px #33cc00 inset
}

#box3 {
width: 100px;
height: 100px;
box-shadow: -4px 2px 6px #333333;
}

#box4 {
width: 100px;
height: 100px;
box-shadow: 4px -2px 6px #333333;
}
</style>
</head>

<body>

<h3>外阴影</h3>
<div id="box"></div>

<h3>内阴影</h3>
<div id="box1"></div>

<h3>添加多个阴影</h3>
<div id="box2"></div>

<h3>X轴偏移量为负数</h3>
<div id="box3"></div>

<h3>Y轴偏移量为负数</h3>
<div id="box4"></div>
</body>

</html>

box-shadow实用

三、为边框应用图片 border-image

　　border-image 顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。

　　border-image的语法：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>border-image</title>
<style>
#box {
width: 180px;
height: 180px;
background: #F4FFFA;
border: 70px solid #ddd;
border-image: url(/img/1.png) 70 repeat
}

#box1 {
width: 170px;
height: 170px;
border: 70px solid;
border-image: url(/img/1.png) 70 round;
}

#box2 {
width: 170px;
height: 170px;
border: 70px solid;
border-image: url(/img/1.png) 70 stretch;
}

#border_image {
height: 100px;
width: 450px;
border: 15px solid #ccc;
border-image: url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 30 round;
}
</style>
</head>

<body>

<h3>repeat（重复）</h3>
<div id="box"></div>

<h3>round（平铺）</h3>
<div id="box1"></div>

<h3>stretch（拉伸）</h3>
<div id="box2"></div>

<h3>请为我镶嵌上漂亮的画框吧</h3>
<div id="border_image">

</body>

</html>

border-image实用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航