一一篇文章陪你学⊙﹏⊙习培训CSS3照片外框

日期:2021-01-21 类型:科技新闻 

关键词:微信小程序商城,免费微信小程序,小程序设计软件,小程序生成平台,可查询的小程序

应用CSS3 border-image 特性,你可以以在原素的周边设定照片外框。

一、访问器适用

表格中的数据特定彻底适用该特性的第一个访问器版本号。

数据后边的 -webkit- 或是 -moz- 应用时要要特定作为前缀。

二、CSS3 border-image 特性

CSS3 border-image 特性容许您特定要用于替代原素周边的一切正常界限的图象。特性有三个一部分:

  • 做为外框的照片。
  • 在哪儿里切分图象。
  • 明确正中间一部分应反复或拓宽。

下列面的图象(称为 "border.png")为例子:

基本原理剖析:

border-image 性将图象切分成九个一部分,如同一个井字手机游戏板。随后将角放到拐角处,正中间一部分按特定的次序反复或拉申。

留意:

让border-image 一切正常工作中, 原素也必须设定外框特性!

1. 图象的正中间一部分反复建立界限,照片做为外框

CSS编码:

<!DOCTYPE CSS>

<CSS lang="en">

<head>

  <meta charset="UTF-8">

  <title>新项目</title>

</head>

<body>

  <p id="borderimg">在这里里,图象的正中间一部分被拓宽来建立界限.</p>

  <p>这儿是初始图象:</p><img src="img/border.png">

</body>

</CSS>

编码以下:

#borderimg {

    border: 10px solid transparent;

    padding: 15px;

    -webkit-border-image: url(img/border.png) 30 round; /* Safari 3.1-5 */

    -o-border-image: url(img/border.png) 30 round; /* Opera 11-12.1 */

    border-image: url(img/border.png) 30 round;

}

2. 图象的正中间一部分拓宽到建立界限:应用照片做为外框!

案例编码:

#borderimg {

                border: 10px solid transparent;

                padding: 15px;

                -webkit-border-image: url(img/border.png) 30 stretch;

                /* Safari 3.1-5 */

                -o-border-image: url(img/border.png) 30 stretch;

                /* Opera 11-12.1 */

                border-image: url(img/border.png) 30 stretch;

            }

留意: border-image 特性是border-image-source, border-image-slice, border-image-width, border-image-outset 和 border-image-repeat 的简称.

1. 不一样的切成片值

不一样的切成片值彻底更改外框的模样:

案例 1

border-image: url(border.png) 50 round;

#borderimg1 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(img/border.png) 50 round;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 50 round;

/* Opera 11-12.1 */

border-image: url(img/border.png) 50 round;

}

案例 2

border-image: url(border.png) 20% round;

#borderimg2 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(img/border.png) 20% round;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 20% round;

/* Opera 11-12.1 */

border-image: url(img/border.png) 20% round;

}

案例 3

border-image: url(border.png) 30% round;

编码以下:

#borderimg3 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(img/border.png) 30% round;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 30% round;

/* Opera 11-12.1 */

border-image: url(img/border.png) 30% round;

}

三、小结

文中根据CSS基本,应用CSS語言,详细介绍了相关CSS界定照片外框的专业知识点,从基本的特性定义下手 ,border-image的使用方法,在具体运用中必须留意的难题,干了详尽的解读。根据一个个案例的演试。期待协助你更强的学习培训CSS。

想学习培训大量Python互联网网络爬虫与数据信息发掘专业知识,可前去技术专业网站: http://pdcfighting.com/

到此这篇有关一一篇文章陪你学习培训CSS3照片外框的文章内容就详细介绍到这了,大量有关CSS3照片外框內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!