HTML5，图片边框，.9效果处理

图片边框背景，九宫格效果裁剪。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>边框图片的本质是背景，并不会影响元素内容的放置，类似九宫格效果，9个位置 一一对应</title><style type="text/css">* {padding: 0;margin: 0;}div {width: 300px;height: 300px;margin: 10px auto;/* border: 27px solid red; */border: 1px solid red;padding: 27px;/* 添加边框图片 *//* border-image-source：可以指定边框图片的路径，默认只是填充到容器的4个角点 */border-image-source: url(../images/thermostat_cold_on.png);/* 让它变成九宫格 slice设置4个方向上的裁切距离（无单位）.fill 是做内容的内部填充 */border-image-slice: 27 fill;/* width：边框图片的宽度值。没有设置该属性，那么宽度默认就是元素的原始的边框宽度 细节：1.边框图片的本质是背景，不会影响元素内容的放置2.元素内容只会被容器的padding和border影响。建议：一般将值设置为原始的边框的宽度。*/border-image-width: 27;border-image-outset: 0px; /* 类似添加padding，使用非常少 *//* repeat：直接重复平铺；round：将内容缩放，进行完全填充，推荐使用 */border-image-repeat: repeat; /* 缩写 *//* border-image: source slice /width/outset /repeat; *//* border-image: url(../images/thermostat_cold_on.png) 27/ 27px/0px /round; */}</style></head><body><div>边框图片的本质是背景，不会影响元素内容的放置</div></body>
</html>

======================================

聊天背景实现

<html><head><meta charset="utf-8"><title>例子，实现聊天背景（.9图片），边框图片实现复杂UI效果</title><style >*{padding:0;margin:0;}div {width: 200px;height: auto;border: 10px solid red;margin: 100px auto;/* 添加圆角边框图片 */border-image-source: url(../images/thermostat_hot_on.png);/* 设置受保护的区域的大小 */border-image-slice: 10 fill;/* 设置边框图片的宽度1.明确圆角的大小2.明确受保护的区域的大小*/border-image-width: 10px;/* 设置背景平铺效果：平铺（round，repeat）， 默认stretch-图片拉伸处理 */border-image-repeat: stretch;}</style></head><body><div>2019年3月5日，杭州西湖（府苑）小学首节“活字课”开讲，淘宝汉字文化手艺人化身“活字老师”走进校园。小学生们现场体验活字印刷术，感受四大发明之“活字印刷”的魅力。一位小学生还用活字印刷出一篇“硬核”作文《春节假期压岁钱所有权分析》，吐槽爸妈“代管”压岁钱，文末写道：“红包千万个，女儿我一个，红包不给我，亲人两行泪。”</div></body>
</html>

HTML5，图片边框，.9效果处理相关推荐

html5图片文字环绕效果,HTML5实现Word中文字全环绕图片效果
实现这个功能是当时看见数字报的展示出来的编排方式,就是图片+热点,而且下载打开还是PDF的,让我这个WP用户咋个看.想实现Word中的编排方式,也需要浏览器支持Word插件,火狐.谷歌.Opera这些 ...
HTML5 图片边框
边框图循环平铺(repeat); <div id="repeat">图片将会循环贴满边框区域</div> #repeat { border: 15px so ...
html5 图片横向滑动效果,JS实现图片横向滚动效果示例代码
图片横向滚动代码 .box{ margin:0 auto; height:70px; width:810px; padding:10px; border:1px solid #FF0000; } .b ...
图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
哈哈，又找到几个强大的html5+css3的动画效果
一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览发表回复 13 又是一周即将过去,我们来精心挑选这周分享的31款别出心裁的HTML5动画,很多还比较实用,一起来看看吧. ...
图片动画效果html5,8个实用炫酷的HTML5图片动画应用
原标题:8个实用炫酷的HTML5图片动画应用近期我们发布了不少关于HTML5和jQuery的图片动画应用,很多都比较实用,也有一些效果非常炫酷,比如一些HTML5 3D图片动画特效.本文精选了8个实 ...
html怎么做出相框的效果,使用CSS3制作PS级的图片边框效果
当一个开发者需要制作图片边框效果时通常有两种选择:一是使用Photoshop来制作,二是在通过CSS来渲染"盒中盒"的效果.在这个教程中,我们要制作一种带复杂边框的相框效果,通过 ...
基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
html将图片动画效果,8款精美的HTML5图片动画分享
原标题:8款精美的HTML5图片动画分享 HTML5结合jQuery可以让网页图片变得更加绚丽多彩,比如实现一些图片3D切换.CSS3动画绘制以及各种图片效果的渲染.本文将分享8款精美的HTML5图片 ...

HTML5，图片边框，.9效果处理

HTML5，图片边框，.9效果处理相关推荐

最新文章

热门文章