继续。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style type="text/css">
#frame .item{
margin: auto;
background-color: #adfffd;
height: 200px;
width: 200px;
border: 30px solid;
box-shadow: 15px 15px 20px 15px #c5c5c5 ; /* box-shadow可以用来给盒模型添加阴影 */
/* 阴影属性的参数由1个颜色、inset参数和四个length长度组成,具体格式如下:
box-shadow: color inset <offset-x> <offset-y> <blur-radius>
color不必多说;
inset: 若没有inset参数,默认阴影在边框外。
而使用 inset 后,阴影在边框内(即使是透明边框),背景之上内容之下。可以更换这个值的位置,浏览器同样支持。
<offset-x> <offset-y>: 这是头两个 <length>值,用来设置阴影偏移量。
<offset-x> 设置水平偏移量,如果是负值则阴影位于元素左边。
<offset-y> 设置垂直偏移量,如果是负值则阴影位于元素上面。可用单位请查看 <length>。
如果两者都是0,那么阴影位于元素后面。这时如果设置了 <blur-radius> 或 <spread-radius> 则有模糊效果。
<blur-radius>: 这是第三个 <length> 值。
值越大,模糊面积越大,阴影就越大越淡。 不能为负值。默认为0,此时阴影边缘锐利。
<spread-radius> : 这是第四个 <length> 值。
取正值时,阴影扩大;取负值时,阴影收缩。默认为0,此时阴影与元素同样大。
*/
border-image: url(border.png) 30 30 30 round;
/* 利用border-image属性可以让一个内容块的边框由图片的形式显示出来
参数有五个,分别为:source slice width outset repeat|initial|inherit
Source 要用于绘制边框的图像的路径
Slice 图像边框的向内偏移
Width 图像边框的宽度
Outset 边框图像区域超出边界框的量
Repeat 一种关键字,用于设置图片在水平方向和竖直方向的重复方式。其取值有以下四种:
stretch:默认值,将图片进行拉伸以填充边框的长
repeat:沿边框长平铺图片
round:沿着边框的长整数次的平铺图片(元素可能被自动调整大小以适应该要求)
space:沿着边框的长整数次的平铺图片(如果图片不能填满元素,则使用空白填充)
*/
margin-bottom: 50px;
border-radius: 50px 75px 125px 150px;
/* border-radius:用于添加圆角边框,其取值分两大类:值跟百分比。
其中取值分1-4个值。每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。
如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。
百分比则越接近100%,则该圆角越接近一个该块大小能够容纳的一个椭圆。
*/
}
#frame .item2{
margin: auto;
background-color: #adfffd;
height: 200px;
width: 300px;
border: 15px solid transparent;
box-shadow: 5px 5px 20px 5px #c5c5c5;
border-image: url(border.png) 30 30 stretch;
border-radius: 50%;
}
#frame .item3{
margin: auto;
margin-top: 50px;
background-color: #adfffd;
height: 100px;
width: 100px;
border: 15px solid transparent;
box-shadow: 50px 50px 20px 0px #c5c5c5;
border-image: url(border.png) 30 30 stretch;
border-radius: 50px;
}
</style>
<body>
<div id="frame">
<div class="item"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
运行结果: