栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

CSS3圆角边框和边界图片效果实例

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

CSS3圆角边框和边界图片效果实例

本文的学习要点如下:

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

XML/HTML Code复制内容到剪贴板
  1. border-radius 属性允许您为元素添加圆角边框! 
      
  2.   
  3. div {   
  4.     width: 200px;   
  5.     height: 100px;   
  6.     padding:20px;   
  7.     border: 1px solid red;   
  8.     border-radius : 25px;      
  9. }   

2.盒阴影 box-shadow

XML/HTML Code复制内容到剪贴板
  1.   
  2.   
  3. div {   
  4.     width: 200px;   
  5.     height: 100px;   
  6.     background: red;   
  7.        
  8.     box-shadow: 10px 10px 5px #000;   
  9. }   
  10.   

3.边界图片 border-image

html部分

XML/HTML Code复制内容到剪贴板
  1. 注意:  Internet Explorer 不支持 border-image 属性。

      
  2.  border-image 属性用于设置图片的边框。

      
  3.   
  4. 这里,图像平铺(重复)来填充该区域。
  

  •   
  • 这里,图像被拉伸以填充该区域。
  •   
  •   
  • 这是我们使用的图片素材:

      


  •   
  •   
  • css部分

    CSS Code复制内容到剪贴板
    1. div {   
    2.     width: 250px;   
    3.     padding: 10px 20px;   
    4.     border: 15px solid translate;   
    5. }   
    6. #round {   
    7.       
    8.       
    9.     -webkit-border-image : url(../images/border.png) 30 30 round;   
    10.       
    11.     -o-border-image : url(../images/border.png) 30 30 round;   
    12.     border-image : url(../images/border.png) 30 30 round;   
    13. }   
    14.   
    15. #stretch {   
    16.     -webkit-border-image : url(../images/border.png) 30 30 stretch;   
    17.     -o-border-image : url(../images/border.png) 30 30 stretch;   
    18.     border-image : url(../images/border.png) 30 30 stretch;   
    19. }   
    20.   

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/215770.html

    CSS教程相关栏目本月热门文章

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号