1196次阅读
盒子圆角和阴影

CSS3是最近兴起的一种技术,就是因为css2之前的功能太局限,不能满足需求,所以有关组织研究出了css3这门技术。其实也就是在原来的css基础上增加了很多扩展功能,不过功能确实是很强大。今天先来看两个知识点,不过这里的例子一定要用版本较高的浏览器运行哦,推荐chrome。

好了,废话不多说,闲来看第一个例子,圆角盒子:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>盒子圆角和阴影</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <p>圆角盒子</p>
  <div class="box1"></div>
  <p>四个角还能分别设置</p>
  <div class="box2"></div>
</body>	
check the result

css:

.box1 {
  width : 100px;
  height : 100px;
  background-color : pink;
  border-radius : 20px;
}
.box2 {
  width : 100px;
  height : 100px;
  background-color : pink;
  border-top-right-radius : 10px;
  border-bottom-right-radius : 20px;
  border-bottom-left-radius : 30px;
  border-top-left-radius : 40px;
}	

其实很简单,可以通过border-radius设置圆角半径,还能分别设置4个角的圆角半径。

觉得没什么用,那是没有发挥想象,看看下面这个例子,一个奥运五环:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>盒子圆角和阴影</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <ul class="flag">
    <li class="circle blue"></li>
    <li class="circle blue blueRightBorder"></li>
    <li class="circle yellow"></li>
    <li class="circle yellow yellowTopBorder"></li>
    <li class="circle black"></li>
    <li class="circle black blackRightBorder"></li>
    <li class="circle green"></li>
    <li class="circle green greenTopBorder"></li>
    <li class="circle red"></li>
  </ul>
</body>	
check the result

css:

.flag {
  position : relative;
}
.circle {
  list-style-type : none;
  width : 80px;
  height : 80px;
  border : 10px solid;
  border-radius : 50px;
  position : absolute;
  top : 0px;
  left : 0px;
}
.blue {
  border-color : blue;
}
.yellow {
  border-color : yellow;
  top : 50px;
  left : 55px;
}
.black {
  border-color : black;
  top : 0px;
  left : 110px;
}
.green {
  border-color : green;
  top : 50px;
  left : 165px;
}
.red {
  border-color : red;
  top : 0px;
  left : 220px;
}
.blueRightBorder {
  z-index : 4;
  border-bottom-color : transparent;
}
.yellowTopBorder {
  z-index : 3;
  border-right-color : transparent;
}
.blackRightBorder {
  z-index : 2;
  border-bottom-color : transparent;
}
.greenTopBorder {
  z-index : 1;
  border-right-color : transparent;
}	

首先,如果圆角半径就等于宽度的一半,那么不就可以形成圆形吗?而由之前的盒子模型,要把border的厚度也考虑进去。然后再通过left和top的偏移设置就可以定位五环。最后也是最复杂的,就是相互覆盖的关系,这里我们把需要覆盖的圆形复制了一份,然后通过设置z-index和一些边的透明,来实现了五环的效果。

还有一个特别不错的属性就是box-shadow,可以用来设置盒子的阴影,来看看例子:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>盒子圆角和阴影</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="shadowBox">我有阴影</div>
  <div class="multiShadowBox">我有多个阴影</div>
  <div class="spreadShadowBox">扩展半径</div>
  <div class="innerShadowBox">内阴影</div>
</body>	
check the result

css:

.shadowBox {
  width : 100px;
  height : 100px;
  background-color : pink;
  box-shadow : 10px 10px 20px black;
}
.multiShadowBox {
  width : 100px;
  height : 100px;
  margin-top : 30px;
  background-color : pink;
  box-shadow : 2px 2px 10px red, 10px 10px 20px black;
}
.spreadShadowBox {
  width : 100px;
  height : 100px;
  margin-top : 30px;
  background-color : pink;
  box-shadow : 10px 10px 20px 10px black;
}
.innerShadowBox {
  width : 100px;
  height : 100px;
  margin-top : 30px;
  background-color : pink;
  box-shadow : inset 0px 0px 20px 5px black;
}	

这个box-shadow可以设置6个属性,分别是投影方式,x的偏移,y的偏移,模糊半径,扩展半径和颜色,也可以设置多重阴影,中间用逗号隔开。投影方式默认外投影,如果设置为inset则为内投影。

阴影能干什么?再来看个实际例子:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>盒子圆角和阴影</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="border"><img src="pic.png"/></div>
</body>	
check the result

css:

.border {
  width : 120px;
  height : 120px;
  text-align : center;
  box-shadow : 0px 0px 5px black;
}
.border img {
  margin-top : 10px;
}	

这样一设置,照片是不是就显得高大上了呢?用它来显示petshow中的照片岂不是效果会好很多?

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录