CSS-DAY01

知识点：边框属性（border-radius、box-shadow、border-image）

在 CSS3 中 border-radius 属性被用于创建圆角:

div
{
  border:1px solid red;
  background:pink;
  width:100px;
  height:100px;
  border-radius:50%;
}

在CSS3 中的 box-shadow 属性被用来添加阴影:

div
{
    width:300px;
    height:100px;
    background-color:pink;
    box-shadow: 10px 10px 5px blue;
}

 

在 div 中使用图片创建边框：

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

 

知识点：CSS3 背景（background-size、background-origin）

background-size指定背景图像的大小：

div
{
background:url(flower.png);
background-size:50px 50px;
background-repeat:no-repeat;
padding-top:20px;
}

 

background-origin 属性规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域：

div
{
border:1px solid black;
padding:35px;
background-image:url('head.png');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
#div3
{
background-origin:padding-box;
}