关闭

CSS3 边框

标签: css3css3边框圆角盒阴影边界图片
183人阅读 评论(0) 收藏 举报
分类:

学习要点:

  • 圆角 border-radius
  • 盒阴影 box-shadow
  • 边界图片 border-image

1.圆角 border-radius

<div>border-radius 属性允许您为元素添加圆角边框! </div>

div {
    width: 200px;
    height: 100px;
    padding:20px;
    border: 1px solid red;
    border-radius : 25px;   
}

2.盒阴影 box-shadow

<div></div>

div {
    width: 200px;
    height: 100px;
    background: red;
    /*x轴偏移量 y轴偏移量 模糊程度 阴影颜色*/
    box-shadow: 10px 10px 5px #000;
}

3.边界图片 border-image
html部分

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>

<div id="round">这里,图像平铺(重复)来填充该区域。</div>
<br>
<div id="stretch">这里,图像被拉伸以填充该区域。</div>

<p>这是我们使用的图片素材:</p>
<img src="images/border.png" />

css部分


div {
    width: 250px;
    padding: 10px 20px;
    border: 15px solid translate;
}
#round {
    /*safari*/
    /*图片源 图片边界向内偏移量 图片的宽度 用于指定在边框外部绘制 border-image-area 的量  样式*/
    -webkit-border-image : url(../images/border.png) 30 30 round;
    /*opera*/
    -o-border-image : url(../images/border.png) 30 30 round;
    border-image : url(../images/border.png) 30 30 round;
}

#stretch {
    -webkit-border-image : url(../images/border.png) 30 30 stretch;
    -o-border-image : url(../images/border.png) 30 30 stretch;
    border-image : url(../images/border.png) 30 30 stretch;
}
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:118105次
    • 积分:2851
    • 等级:
    • 排名:第13148名
    • 原创:175篇
    • 转载:0篇
    • 译文:0篇
    • 评论:9条