web前端|css教程
CSS,半透明边框
web前端-css教程
CSS半透明边框的实现实例详解（图）
app源码怎么修改,vscode 65001,siege ubuntu,tomcat提醒,sqlite 导出db,息壤服务器控制面板,Wordpress hover插件,前端拖拽框架 vue,python 爬虫效率,php好难学,免费seo推广,汽车网站制作模板,网页404页面代码,土特产模板,html 页面 切换 动画,一个学校管理系统,高频彩程序源码lzw
1.半透明边框
七星彩网投注源码,ubuntu 强制关机恢复,tomcat用什么开发环境,重复打印爬虫,php设计表格,秒收录怎么做霸屏seo 排名lzw
问题:
html5 切水果源码,ubuntu查看系统详情,tomcat7没启动成功,爬虫灯耗电么,php怎么实现多账号登录,快速seo站长lzw
如果我们要为一个容器设置红色背景和一道黑色半透明边框，我们可能会这样写:
border: 20px solid rgba(0,0,0,0.5);background: red;
但是效果却是这样的（图1-1.jpg）；我们的半透明颜色怎么没有实现半透明边框？
图1-1.jpg
解决方案：
我们可以通过background-clip属性来调整上面的默认行为，把它是值设为padding-box,然后就出现了我们想要的效果（图1-2.jpg）；
border: 20px solid rgba(0,0,0,0.5);background: red;background-clip: padding-box;
图1-2.jpg
2.background-clip
既然用到了background-clip属性，那我们就来看看这个属性吧;
background-clip:
设置元素的背景（背景图片或颜色）是否延伸到边框下面。
示例
CSS content
span { border: 10px blue; border-style: dotted double; margin: 1em; padding: 2em; background: #F8D575;}.border-box { background-clip: border-box; }.padding-box { background-clip: padding-box; }.content-box { background-clip: content-box; }.text { background-clip: text; }
HTML content
border-boxpadding-boxcontent-boxtext
效果：（图2-1.jpg）
图2-1.jpg
3.border-style
4.border-image
初始值：
border-image-source: none
border-image-slice: 100%
border-image-width: 1
border-image-outset: 0s
border-image-repeat: stretch
4.1 border-image-source: none |
where
= | | | | |
where
= image([ [ | ]? , ? ]!)
= image-set(#)
= element( )
= cross-fade(,?)
= | | |
Gradient示例：
= linear-gradient( [ | to ]?, )
CSS content
.gradient {border: 30px solid; border-image-source: linear-gradient(to right, red, green, blue); /*border-image-source: linear-gradient(90deg, red, green, blue);*/ border-image-slice: 10; padding: 20px;}
HTML content
The image is stretched to fill the area.
效果：（图4-1.jpg）
图4-1.jpg
4.2 border-image-slice: [ | ]{1,4}&& fill?
这个 border-imge-slice 属性传入1~4个参数（number没有单位专指像素或百分比值）将图片分割成9个部分,1,2,3,4四个区块是不会拉伸,不会平铺，称之为盲区，5,6,7,8四个区块可以通过 border-image-repeat 来控制拉伸平铺和重复（ stretch:默认值,拉伸; repeat:平铺; round:整数次平铺; ），第9区块不显示，传入参数 fill 则显示第9区块，分割情况如下图（图4-2.jpg && 图2-3.jpg）:
图4-2.jpg
图4-3.jpg
我们通过上面这张图片（81px^81px）来看传入不同个数的参数是如何分割这张图片的；
1个参数
/* border-image-slice: slice */border-image-slice: 27; border: 30px solid transparent;padding: 20px;border-image-source:url([/files/4127/border.jpg](/files/4127/border.jpg));
图4-4.jpg
图4-5.jpg(效果图)
2个参数（参考图4-3.jpg）
/* border-image-slice: vertical horizontal */border-image-slice: 40 40.5; border: 30px solid transparent;padding: 20px;border-image-source:url([/files/4127/border.jpg](/files/4127/border.jpg));
图4-6.jpg
图4-7.jpg(效果图)
3个参数
/* border-image-slice: top horizontal bottom */border-image-slice: 27 40 27; border: 30px solid transparent;padding: 20px;border-image-source:url([/files/4127/border.jpg](/files/4127/border.jpg));
图4-8.jpg（效果图）
4个参数(参考图4-2.jpg)
/* border-image-slice: top right bottom left */border-image-slice: 27 40 27 27;border: 30px solid transparent;padding: 20px;border-image-source:url([/files/4127/border.jpg](/files/4127/border.jpg));
图4-9.jpg（效果图）
4.3 border-image-width: [ | | | auto ]{1,4}
语法：
border-image-width: all /* One-value syntax */ E.g. border-image-width: 3;border-image-width: vertical horizontal /* Two-value syntax */ E.g. border-image-width: 2em 3em;border-image-width: top horizontal bottom/* Three-value syntax */ E.g. border-image-width: 5% 15% 10%;border-image-width: top right bottom left/* Four-value syntax */ E.g. border-image-width: 5% 2em 10% auto;
设置边框图片的width，如果超出了设置的border-width,会向内扩展；查看下方示例，比较（图4-10.jpg && 图4-11.jpg）；
示例：
border: 30px solid transparent;padding: 20px;border-image-source: url("/files/4127/border.jpg");border-image-slice: 27;
图4-10.jpg
border: 30px solid transparent;padding: 20px;border-image-source:url([/files/4127/border.jpg](/files/4127/border.jpg));border-image-slice: 27;border-image-width: 1 2 1 1;
图4-11.jpg
4.4 border-image-outset: [ | ]{1,4}
语法：
/* border-image-outset: sides */border-image-outset: 30%;/* border-image-outset:vertical horizontal */border-image-outset: 10% 30%;/* border-image-outset: top horizontal bottom */border-image-outset: 30px 30% 45px;/* border-image-outset:top right bottom left */border-image-outset: 7px 12px 14px 5px;
效果是将边框图片延伸到盒子外面，查看下放示例，比较（图4-12.jpg && 图4-13.jpg）；
示例:
border: 30px solid transparent; padding: 20px; border-image-source:url([/files/4127/border.jpg](/files/4127/border.jpg)); border-image-slice: 27; margin: 60px;
图4-12.jpg
border: 30px solid transparent;padding: 20px;border-image-source:url([/files/4127/border.jpg](/files/4127/border.jpg));border-image-slice: 27;margin: 60px;border-image-outset: 2 1 1 1;
图4-13.jpg
4.4 border-image-repeat: [ stretch | repeat | round ]{1,2}
语法：
border-image-repeat: type/* One-value syntax */ E.g. border-image-value: stretch;border-image-repeat: horizontal vertical /* Two-value syntax */ E.g. border-image-width: round space;
如果觉得《CSS半透明边框的实现实例详解》对你有帮助，请点赞、收藏，并留下你的观点哦！
