CSS3入门【二】 边框

简介

1.   用css3可以创建圆角边框、向矩形添加阴影、使用图片来绘制边框等等

实例

1.  向DIV添加圆角边框：（属性：border-radius）

      HTML代码：

<div style="width: 100px;height: 100px;background-color:blue ;"></div>

      css代码：

div{
	border: 2px solid;
	border-radius: 25px;          /*用于创建圆角*/
	-moz-border-radius: 25px;     /*主要用于火狐浏览器*/
}

      效果展示：

2.  阴影效果的边框：（属性：box-shadow）

      HTML代码：

<div></div>

      CSS代码：

div{
	width: 100px;
	height: 100px;
	background-color: cornflowerblue;
	box-shadow: 20px 20px 5px #0000FF;  /*添加阴影*/
}

      效果展示：

3.  使用图片来创建边框：（属性：border-image）

      首先随便找一张图片：

       HTML代码：

<div></div>

       CSS代码：

div{
    border: 50px solid transparent;
    background-color: #000000;
    width: 100px;
    padding: 25px 10px;
    border-image: url(../img/微信图片_20180116104051.png) 30 30 stretch;
      /*stretch：图片拉伸填充边框；round：图片铺满整个边框*/
}

       效果展示：

总结

1.  border-radius

      该属性是一个简写的属性，用于设置四个border-？-radius属性：

border-radius:2em;

      可扩为：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

2.  box-shadow

box-shadow:h-shadow v-shadow blur spread color inset;
/*box-shadow:
             水平阴影，允许负值      必选
             垂直阴影，允许负值      必选
             模糊距离              可选
             阴影尺寸              可选
             阴影颜色              可选
             将外部阴影改为内部阴影   可选
*/

3.  border-image

      border-image是一个简写属性，用于设置以下属性：

      border-image-source    边框所用图片的路径

      border-image-slice        图片边框向内偏移

      border-image-width      图片边框的宽度

      border-image-outset     边框图像区域超出边框的量

      border-image-repeat     边框是否平铺（repeated）、铺满（rounded）、拉伸（strtched）

                                                                                                ——详情见http://www.w3school.com