分享更有价值
被信任是一种快乐

css中的border-image属性怎么用

文章页正文上

这篇文章主要为大家展示了“css中的border-image属性怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中的border-image属性怎么用”这篇文章吧。
  CSS3border-image属性
  作用:使用图片来创建边框
  说明:复合属性。设置或检索对象的边框样式使用图像来填充。可以一次性设置:border-image-source,border-image-slice,border-image-width,border-image-outset和border-image-repeat属性的值。
  语法:
  border-image:sourceslicewidthoutsetrepeat|initial|inherit;
  参数:
  border-image-source:用于指定要用于绘制边框的图像的位置。
  border-image-slice:图像边界向内偏移。
  border-image-width:图像边界的宽度。
  border-image-outset:用于指定在边框外部绘制border-image-area的量。
  border-image-repeat:用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。
  css3border-image属性使用示例
  

  
  
  

  div
  {
  border:15pxsolidtransparent;
  width:300px;
  padding:10px20px;
  }
  #round
  {
  -moz-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)3030round;/*OldFirefox*/
  -webkit-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)3030round;/*SafariandChrome*/
  -o-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)3030round;/*Opera*/
  border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)3030round;
  }
  #stretch
  {
  -moz-border-im免费云主机、域名age:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)3030stretch;/*OldFirefox*/
  -webkit-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)3030stretch;/*SafariandChrome*/
  -o-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)3030stretch;/*Opera*/
  border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)3030stretch;
  }
  
  
  
  在这里,图片铺满整个边框。

相关推荐: JavaScript中模仿C#编码方式举例分析

本篇内容介绍了“JavaScript中模仿C#编码方式举例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首先是JavaScript代码底层部分: //以上两…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册