首页 > 其他分享 >无涯教程-CSS3 - boarder-image属性

无涯教程-CSS3 - boarder-image属性

时间:2024-01-24 12:31:37浏览次数:35  
标签:CSS3 slice boarder 图像 无涯 10px border image

CSS Border image属性用于向某些元素添加图像边界。边界图像的示例语法如下-

#borderimg {
   border: 10px solid transparent;
   padding: 15px;
}

最常用的值如下所示-

Sr.No. Value & Remark
1

border-image-source

用于设置图像路径

2

border-image-slice

用于切片边框图像

3

border-image-width

用于设置边框图像宽度

4

borer-image-repeat

用于将边框图像设置为圆形(rounded),重复(repeated)和拉伸(stretched)

Border Images示例

以下是演示将图像设置为元素边框的示例。

<html>
   <head>
      <style>
         #borderimg1 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 10px;
         }
         #borderimg2 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 20px;
         }
         #borderimg3 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(/css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 30px;
         }
      </style>
   </head>

   <body>
      <p id="borderimg1">This is image boarder example.</p>
      <p id="borderimg2">This is image boarder example.</p>
      <p id="borderimg3">This is image boarder example.</p>
   </body>
</html> 

它将产生以下输出-

参考链接

https://www.learnfk.com/css/css3-boarder-image.html

标签:CSS3,slice,boarder,图像,无涯,10px,border,image
From: https://blog.51cto.com/u_14033984/9394231

相关文章

  • 无涯教程-CSS3 - border-radius属性
    CSS3圆角用于通过使用border-radius 属性为正文或文本添加特殊的彩色圆角,语法如下-#rcorners7{border-radius:60px/15px;background:#FF0000;padding:20px;width:200px;height:150px;}下表显示了圆角的可能值,如下所示:Sr.No.Value&Remark1......
  • 无涯教程-CSS - 文字效果
    您可以使用CSS过滤器将特殊效果添加到文本,图像和网页的其他方面,而无需使用图像或其他图形。AlphaChannelAlpha通道滤镜会更改对象的透明度,从而使其融合到背景中,以下参数可以在此过滤器中使用-Sr.No.Parameter&Remark1opacity透明度。0是完全透明的,100是完全不透明的......
  • 无涯教程-CSS - @规则
    本章将涵盖以下重要的@规则-@import    : 将另一个样式导入到当前样式表中。@charset   : 样式使用的字符集。@font-face  : 用于详尽地描述文档中使用的字体。!important  : 指示用户定义的规则应优先。注意-还有其他@规则,无涯教程将在......
  • 无涯教程-CSS - 伪元素
    CSS伪元素用于向某些选项添加特殊效果,伪元素的简单语法如下-selector:pseudo-element{property:value}CSS类也可以与伪元素一起使用-selector.class:pseudo-element{property:value}最常用的伪元素如下-Sr.No.Value&Remark1:first-linep:first-line  选择每......
  • 无涯教程-CSS - 伪类
    CSS伪类是用来添加一些选择器的特殊效果。伪类的简单语法如下-selector:pseudo-class{property:value}CSS类也可以与伪类一起使用-selector.class:pseudo-class{property:value}最常用的伪类如下-Sr.No.Value&Remark1:linka:link 选择所有未访问链接2:visi......
  • 无涯教程-CSS - 图层(Layers)
     CSSlayers指的是将z-index属性应用于彼此重叠的元素。z-index属性与position属性一起使用以创建图层效果。您可以指定哪个元素应该放在顶部,哪个元素应该放在底部。<html><head></head><body><divstyle="background-color:red;width:300......
  • 无涯教程-CSS - 尺寸(Dimension)
    无涯教程具有以下属性,可让您控制盒子的尺寸。height      :属性用于设置盒子的高度。width      :属性用于设置盒子的宽度。line-height  :属性用于设置一行文本的高度。max-height :属性用于设置盒子可以达到的最大高度。min-height ......
  • 无涯教程-CSS - 轮廓(Outlines)
    轮廓与边框非常相似,但是也没有什么主要区别-轮廓不占用空间。轮廓不必一定是矩形的。您可以使用CSS设置以下大纲属性。outline-width   : 属性用于设置轮廓的宽度。ouylinr-style    : 属性用于设置轮廓的线条样式。outline-color    : 属......
  • 无涯教程-CSS - 列表(List)
    本章教您如何使用CSS控制listtype,position,style等。无涯教程有以下五个CSS属性,可用于控制列表-list-style-type      : 设置列表项标志的类型。list-style-position  : 设置列表中列表项标志的位置。list-style-image    : 将图象设置为列表......
  • 无涯教程-CSS - 边框(Border)
    border属性使您可以指定表示元素的边框。您可以更改边框的三个属性-border-color   : 指定边框的颜色。border-style    : 指定边框样式为solid,dashedline,double。border-width   :指定边框的宽度。现在,无涯教程将通过示例了解如何使用这些属性......