关闭 x
IT技术网
    技 采 号
    ITJS.cn - 技术改变世界
    • 实用工具
    • 菜鸟教程
    IT采购网 中国存储网 科技号 CIO智库

    IT技术网

    IT采购网
    • 首页
    • 行业资讯
    • 系统运维
      • 操作系统
        • Windows
        • Linux
        • Mac OS
      • 数据库
        • MySQL
        • Oracle
        • SQL Server
      • 网站建设
    • 人工智能
    • 半导体芯片
    • 笔记本电脑
    • 智能手机
    • 智能汽车
    • 编程语言
    IT技术网 - ITJS.CN
    首页 » CSS »用CSS边框图像让你的网站更漂亮

    用CSS边框图像让你的网站更漂亮

    2016-01-12 00:00:00 出处:mzkmzk
    分享

    微信扫一扫:分享

    Scan me!

    微信里点“发现”,扫一下

    二维码便可将本文分享至朋友圈。

    不久之前,添加一些装饰性元素,例如给网页中的图片添加花哨的边,以及耐心调整CSS文件才能使你的网页看起来不错。然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码。该文将告诉你如何做到!

    边框属性(Border Image Properties)

    最普通的方法去设计边框就是使用预设的边框样式属性值。包括: dotted, dashed,solid, double, groove, ridge, inset, 和 outset。这些样式已经给了你不少选择。但是你可以更进一步使用接下来的CSS属性去增加吸引人的背景图片到你的边框。

    border-image-source 属性

    使用这个属性,你可以分配一个背景图片到element的边框中。这个值常常是图片的URL:

    element {
      border-image-source: url('myimage.png');
    }

    你会发现CSS的渐变同样产生效果:

    element {
      border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
    }

    在浏览器中它大概是这样的:

    Border image with a gradient instead of an image.

    假如你设定属性值为 none,图片将不会显示,浏览器将使用属性 border-style 的值。因此,border-style 作为一个后备选项是个不错的主意!

    值得一提的是,你使用的图片不需要匹配边框的宽和高,一张小图片就可以装饰你的网站,如例子中的element可任意调整其图片的大小并且可以自动识别适应屏幕的尺寸。

    border-image-slice 属性

    在你使用border-image-source 属性选择一张图片之后,你可以应用border-image-slice 属性。

    element {
      border-image-slice: 19;
    }

    这个属性规定图像上下左右的边缘向内偏移,图像被分割成九个区域:四个角,四条边以及一个中间区域。

    The border image sliced up into nine areas: four corners, four edges and a middle area.

    你可以规定四个数字或者百分比作为值。当你规定四个数值的时候,它应用顺序为上,右,下,左。假如你省略左侧偏移值,那么左边的值将会默认和右边数值相同。假如你省略下方数值,它将默认与上方的相同。但假如你省略右侧偏移值,它将默认与上方数值相同。假如你只使用一个数值,这个数值将会被应用在所有偏移值上。

    相对于图像尺寸的百分比值-图像宽度影响水平偏移,高度影响垂直偏移。

    数字值代表图像像素或者矢量坐标。另,不要在数字后面加px,否则这个属性将不会工作。

    以下是如何使用 border-image-slice属性的例子:

    <div class="box">
      Border Image
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </div>
    .box {
      border: 19px dotted #c905c6;
      border-image-source: url(border-bg.png);
      border-image-slice: 19; 
    }

    使用一个 100 x 100px 大小的图片:

    The original border background image

    最终效果图大概是这样:

    中间区域呈现不可见的透明状态,假如你想保留边框图像中间部分,使用关键词fill。

    例如,使用一个有中间区域的图片,假如你使用关键词 fill,你将得到以上的图片。但是假如你使用它:

    .box {
      border: 19px dotted #c905c6;
      border-image-source: url(border-fill.png);
      border-image-slice: 19 fill;
    }

    中间区域的图片会出现:

    The original border filled background image

    虽然有点模糊,图片看起来被压缩,但是中间区域的图片可视了:

    Border image with fill applied.

    border-image-width 属性

    此属性将会绘制与所谓的突变边界地区内部,这个边界默认区域为border box,就像属性border-image-slice,属性 border-image-width 规定了内部被划分为九个区域。

    同样的,此属性的四个规定值可用数值或百分比代表上,右,下,左的量。百分比参考了图像区域尺寸,图像宽度影响水平偏移,高度影响垂直偏移。假如你使用数值,它的用法和 border-width是一样的。例如:

    .box {
      border: 19px dotted #c905c6;
      border-image-source: url(border-bg.png);
      border-image-slice: 19;
      border-image-width: 3;
    }

    … 设定边框(border)图片宽为边框宽(border-width )值的三倍,19px。结果是这样的:

    Border image width set without the px unit.

    我发现假如赋值给 border-image-width 和 border-image-slice 属性值相同,这确保你的边框图片处于最佳状态而不模糊扭曲。

    border-image-outset 属性

    目前为止我已经使用默认值插入图片与边框图片区域。其实你还有一个选项将边框图片放在border box区域的外部。这时候你可以使用 border-image-outset 属性。

    同样的,此属性的四个规定值可用数值或百分比代表上,右,下,左的量,得其输出的用法和 border-width 一样。

    为了更清楚的说明,我用绿色虚线代表 border box 的区域,粉红色的图片代表。边框图片区域。在默认的情况下,边框图片在绿色区域中,这表示边框图片区域在 border box 区域里面。

    Border image inset.

    在CSS文件里加上 border-image-outset: 19px; 粉红色部分将位于绿色部分的外面,这表明边框图片位于border box 区域的外面。

    Border image outset.

    要注意的是在边界框之外的部分图像不触发滚动( trigger scrolling ),也不捕获鼠标事件( mouse events)。

    你可以在 CodePen 试一试我们已经讨论过的这些属性:

    border-image-repeat 属性

    这个属性给如何延展以及铺排边框图像的边缘和中间提供了一些选择。第一个值规定了水平边缘(上和下),第二个值则规定了数值边缘(左和右)。假如你只提供一个值,则此值应用于所有的边。

    可用的一些值:

    stretch – 假如你不使用 border-image-repeat 属性的默认值。它的属性是拉伸图像来填充区域。 repeat – 平铺图像填充区域。假如可用面积区域不能整除图片区块,图片可以被切断。 round – 和 repeat 相同,但是假如可用的面积区域不能适应图片区块,它将自动缩放图片直到适应为止。这导致图片不被切断,但是图片可能看起来会有点变形。 space – 和 repeat 相同,但是假如空间不能正好适应图片,多出的空间将分布在图片周围。

    编写的时候,使用火狐浏览器会造成 space 以及 stretch 有一样的效果,而使用谷歌浏览器会造成 space 以及 repeat 拥有一样的效果。

    border-image Shorthand 属性

    将以上我们所学到的关于 border-image 属性的单个属性总结以下:

    border-image-source border-image-slice border-image-width border-image-outset border-image-repeat

    小例子:

    element {
      border-image: url(myimage.png) 19 / 19px / 0 round;
    }

    在 CodePen 演示页面上自己试一试 border-image-repeat 和 border-image 的属性用法吧。

    假如我想移除边框图片?

    最佳方法就是使用 border Shorthand属性重新设置边框。使用 borderShorthand 属性,你可以很快的重设相同宽度,相同颜色,相同样式的四边。无需规定 border-image:none,也无需重写任何单独的 border-image 属性。

    浏览器支持

    在编写的时候,大多数浏览器都支持 border-image。只有火狐不能拉伸SVG图片,并且Opera Mini不能支持单独使用的属性,除非在使用时加上前缀 -o-。

    总结

    该文全部关于属性 border-image : 它的值,如何以最好的方式使用它们,什么浏览器才能支持。假如你想知道更多细节,可以查询 CSS Backgrounds and Borders Level 3。

    上一篇返回首页 下一篇

    声明: 此文观点不代表本站立场;转载务必保留本文链接;版权疑问请联系我们。

    别人在看

    抖音安全与信任开放日:揭秘推荐算法,告别单一标签依赖

    ultraedit编辑器打开文件时,总是提示是否转换为DOS格式,如何关闭?

    Cornell大神Kleinberg的经典教材《算法设计》是最好入门的算法教材

    从 Microsoft 下载中心安装 Windows 7 SP1 和 Windows Server 2008 R2 SP1 之前要执行的步骤

    Llama 2基于UCloud UK8S的创新应用

    火山引擎DataTester:如何使用A/B测试优化全域营销效果

    腾讯云、移动云继阿里云降价后宣布大幅度降价

    字节跳动数据平台论文被ICDE2023国际顶会收录,将通过火山引擎开放相关成果

    这个话题被围观超10000次,火山引擎VeDI如此解答

    误删库怎么办?火山引擎DataLeap“3招”守护数据安全

    IT头条

    平替CUDA!摩尔线程发布MUSA 4性能分析工具

    00:43

    三起案件揭开侵犯个人信息犯罪的黑灰产业链

    13:59

    百度三年开放2.1万实习岗,全力培育AI领域未来领袖

    00:36

    工信部:一季度,电信业务总量同比增长7.7%,业务收入累计完成4469亿元

    23:42

    Gartner:2024年全球半导体营收6559亿美元,AI助力英伟达首登榜首

    18:04

    技术热点

    iOS 8 中如何集成 Touch ID 功能

    windows7系统中鼠标滑轮键(中键)的快捷应用

    MySQL数据库的23个特别注意的安全事项

    Kruskal 最小生成树算法

    Ubuntu 14.10上安装新的字体图文教程

    Ubuntu14更新后无法进入系统卡在光标界面解怎么办?

      友情链接:
    • IT采购网
    • 科技号
    • 中国存储网
    • 存储网
    • 半导体联盟
    • 医疗软件网
    • 软件中国
    • ITbrand
    • 采购中国
    • CIO智库
    • 考研题库
    • 法务网
    • AI工具网
    • 电子芯片网
    • 安全库
    • 隐私保护
    • 版权申明
    • 联系我们
    IT技术网 版权所有 © 2020-2025,京ICP备14047533号-20,Power by OK设计网

    在上方输入关键词后,回车键 开始搜索。Esc键 取消该搜索窗口。