CSS3——圆角边框与阴影
程序员文章站
2022-06-17 16:16:32
...
CSS3相对于CSS添加了许多新的特性，包括圆角边框与阴影，文字文本，2D变换，过度与动画，3D变换等等。在介绍新的特性之前，我们先聊一聊对于新特性不同的浏览器厂家的支持度以及通过添加前缀解决：
| 浏览器内核 | 浏览器 | CSS3前缀 |
|---|---|---|
| Webkit | Safari Chrome |
-webkit- |
| Gecko | Firefox | -moz- |
| Presto | Opera | -o- |
| Trident | IE | -ms- |
.box3{
-Webkit-border-radius: 50px;
}
1. 圆角边框
添加圆角边框可以分为四个子属性来添加：
border-top-left-radius: 40px 20px; x方向和y方向
border-top-right-radius：右上角
border-bottom-left-radius：左下角
border-bottom-left-radius：右下角
除此之外还能统一使用border-radius来设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆角与阴影</title>
<style type="text/css">
.box{
background-color: #408080;
font-size: 20px;
text-align: center;
float: left;
}
.box1{
height:100px;
width:150px;
border-top-left-radius: 40px 20px;
border-bottom-right-radius: 20px;
border:1px solid #C6A300;
}
.box2{
height:50px;
width:150px;
border-radius: 25px;
}
.box3{
height:100px;
width:100px;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box1 box">box1</div>
<div class="box2 box">box2</div>
<div class="box3 box">box3</div>
</body>
</html>
效果如下：
2.阴影box-shadow
在CSS3中可以给每一个盒子设置阴影，用boxshadow来实现，包含4个子属性：
box-shadow: 水平偏移量x，垂直偏移量y，模糊范围，#888；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆角与阴影</title>
<style type="text/css">
.box{
background-color: #408080;
font-size: 20px;
text-align: center;
float: left;
box-shadow: 10px 10px 30px #888;
}
.box1{
height:100px;
width:150px;
border-top-left-radius: 40px 20px;
border-bottom-right-radius: 20px;
border:1px solid #C6A300;
}
.box2{
height:50px;
width:150px;
border-radius: 25px;
}
.box3{
height:100px;
width:100px;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box1 box">box1</div>
<div class="box2 box">box2</div>
<div class="box3 box">box3</div>
</body>
</html>