CSS3中圆角边框和阴影，图片属性

最新推荐文章于 2024-04-21 10:40:16 发布

前端爱好者。

最新推荐文章于 2024-04-21 10:40:16 发布

阅读量355

点赞数

分类专栏：前端文章标签： CSS

原文链接：https://www.mk2048.com/blog/blog.php?id=j2aacbkkj&title=CSS3%E4%B8%AD+%E5%9C%86%E8%A7%92%E8%BE%B9%E6%A1%86%E5%92%8C%E9%98%B4%E5%BD%B1%EF%BC%8C%E5%9B%BE%E7%89%87%E5%B1%9E%E6%80%A7

版权

前端专栏收录该内容

483 篇文章 4 订阅

订阅专栏

                        
  通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。 
 
  在本章中，您将学到以下边框属性： 
 
  border-radius 
 
  box-shadow 
 
  border-image 
 
  实例 
 
  向 div 元素添加圆角： 
 
   div 
 
   { 
 
   border:2px solid; 
 
  border-radius:25px; 
 
   -moz-border-radius:25px; 
   /* Old Firefox */ 
 
   } 
 
  CSS3 边框阴影 
 
   在 CSS3 中，box-shadow 用于向方框添加阴影： 
 
   div 
 
   { 
 
  box-shadow: 10px 10px 5px #888888; 
 
   } 
 
  CSS3 边框图片 
 
  通过 CSS3 的 border-image 属性，您可以使用图片来创建边框： 
 
   border-image 属性允许您规定用于边框的图片！ 
 
   使用图片创建围绕 div 元素的边框： 
 
   div 
 
   { 
 
  border-image:url(border.png) 30 30 round; 
 
   -moz-border-image:url(border.png) 30 30 round; 
   /* 老的 Firefox */ 
 
   -webkit-border-image:url(border.png) 30 30 round; 
  /* Safari 和 Chrome */ 
 
   -o-border-image:url(border.png) 30 30 round; 
  /* Opera */ 
 
   } 
 
  完整实例 
 
    <!DOCTYPE html> 
  
    <html> 
  
    <head> 
  
    <style>  
  
    div 
  
    { 
  
    border:15px solid transparent; 
  
    width:300px; 
  
    padding:10px 20px; 
  
    } 
  
   #round 
  
    { 
  
    -moz-border-image:url(/i/border.png) 30 30 round; 
     
   /* Old Firefox */ 
  
    -webkit-border-image:url(/i/border.png) 30 30 round; 
     
   /* Safari and Chrome */ 
  
    -o-border-image:url(/i/border.png) 30 30 round; 
     
   /* Opera */ 
  
    border-image:url(/i/border.png) 30 30 round; 
  
    } 
  
   #stretch 
  
    { 
  
    -moz-border-image:url(/i/border.png) 30 30 stretch; 
     
   /* Old Firefox */ 
  
    -webkit-border-image:url(/i/border.png) 30 30 stretch; 
     
   /* Safari and Chrome */ 
  
    -o-border-image:url(/i/border.png) 30 30 stretch; 
     
   /* Opera */ 
  
    border-image:url(/i/border.png) 30 30 stretch; 
  
    } 
  
    </style> 
  
    </head> 
  
    <body> 
  
    <div id="round"> 
   在这里，图片铺满整个边框。</div> 
  
    <br> 
  
    <div id="stretch"> 
   在这里，图片被拉伸以填充该区域。</div> 
  
    <p> 
   这是我们使用的图片：</p> 
  
    <img src="/i/border.png"> 
  
    <p><b> 
   注释：</b> Internet Explorer 不支持 border-image 属性。</p> 
  
    <p>border-image 属性规定了用作边框的图片。</p> 
  
    </body> 
  
    </html>

前端爱好者。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中圆角边框和阴影，图片属性

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。在本章中，您将学到以下边框属性： border-radius box-sh...
复制链接

扫一扫