2351次阅读
盒子圆角和阴影
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元哦！
，不要超过100元哦！
评论请先登录