如何在css中设置图片边框

2023-06-14 22:06:34 371人浏览八月长安

摘要

这篇文章将为大家详细讲解有关如何在CSS中设置图片边框，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。css的三种引入方式1.行内样式，最直接最简单的一种，直接对html标签使用style=&

这篇文章将为大家详细讲解有关如何在CSS中设置图片边框，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

css的三种引入方式

1.行内样式，最直接最简单的一种，直接对html标签使用style=""。2.内嵌样式，就是将CSS代码写在之间，并且用

进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上

就可以了。其次就是导入样式，导入样式和链接样式比较相似，采用@import样式导入CSS样式表，不建议使用。

在css3中，可以使用border-image属性为边框添加背景图片。现在所有主流浏览器最新版本都支持border-image属性。

语法：

如何在css中设置图片边框

说明：

border-image属性需要定义3个方面的内容。

（1）图片路径。

（2）切割宽度：四条边的切割宽度，依次为上边、右边、下边、左边（顺时针）。

（3）平铺方式：有3种取值，分别为repeat、round和stretch。

在本节所有例子中，我们都是使用图所示的这张90px×90px的图片作为边框的背景图片。

如何在css中设置图片边框

代码示例：

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title></title>    <style type="text/css">        div        {            width:210px;            height:150px;            border:30px solid gray;            border-image:url(img/border.png) 30 repeat;        }    </style></head><body>    <div></div></body></html>

浏览器预览效果如下图所示。

如何在css中设置图片边框

分析：

从预览效果我们可以知道，位于4个角的数字1、3、7、9还是乖乖地位于4个角。然后4条边框的2、4、6、8会不断地平铺。

对于border-image属性，我们总结如下:

（1）在制作边框背景图片时，应该制作4条边，中间部分需要挖空。

（2）边框背景图片每条边的宽度跟对应的边框宽度（即border-width）应该相同。

举例：平铺方式

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title></title>    <style type="text/css">        div        {            width:170px;            height:110px;            line-height:110px;            text-align: center;            border:30px solid gray;            margin-top:20px;        }                #div1{border-image:url(img/border.png) 30 repeat;}                #div2{border-image:url(img/border.png) 30 round;}                #div3{border-image:url(img/border.png) 30 stretch;}    </style></head><body>    <div id="div1">repeat</div>    <div id="div2">round</div>    <div id="div3">stretch</div></body></html>

浏览器预览效果如下图所示：

如何在css中设置图片边框

分析：

border-image属性的平铺方式有3种：repeat、round、stretch。

（1）取值为repeat时，表示4条边的小方块会不断重复，超出元素部分将会被剪切掉。

（2）取值为round时，表示4条边的小方块会铺满。为了铺满，边框图片会压缩或拉伸。

（3）取值为stretch时，表示4条边的小方块会拉伸，边长有多长就拉多长。

border-image的派生子属性

border-image属性可以分开，分别为4条边设置相应的背景图片，这4条边的属性如下表所示。

border-image的派生子属性
子属性	说明
border-top-image	定义上边框背景图片
border-bottom-image	定义下边框背景图片
border-left-image	定义左边框背景图片
border-right-image	定义右边框背景图片

关于如何在css中设置图片边框就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何在css中设置图片边框

本文链接: https://www.lsjlt.com/news/275484.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

C++ 生态系统中流行库和框架的学习资源推荐

c++++生态系统中的热门库和框架包括：boost c++库和框架：提供广泛的通用性c++库。stl标准模板库：c++标准库参考。qt框架：跨平台gui开发工具。tensorflow：深...

99+

2024-05-14

c++ 生态系统标准库
c#中label控件导入图片怎么适应大小

在 c# 中调整 label 控件中图像大小的方法：1. 设置 image 对象的 width 和 height 属性；2. 指定 sizemode 属性；3. 调整 label 控件的...

99+

2024-05-14

c#
PHP设计模式：与设计原则的关系

PHP 设计模式：与设计原则的关系引言设计模式是软件开发中的可重用解决方案，用于解决常见的问题。它们基于 SOLID（单一职责、开放-封闭、依赖倒置、接口隔离、里氏替换）等设计原则...

99+

2024-05-14

php 设计模式 lsp
c#怎么添加dll

c# 中添加 dll 的方法有：使用项目引用：在解决方案资源管理器中，右键单击项目并选择“添加”>“引用”，然后导航到 dll 文件并单击“添加”按钮。使用 dllimport：导...

99+

2024-05-14

c#
c#程序自启动怎么设置

c# 程序的自启动方法有三种：注册表：在指定注册表项下创建新值，并将其设置为程序可执行文件路径。任务计划程序：创建一个新任务，并在触发器和动作部分分别指定登录时或特定时间触发，以及启动程...

99+

2024-05-14

c#
c#怎么调用dll文件

可在 c# 中轻松调用 dll 文件：引用 dll（使用 dllimport 特性）定义与 dll 函数签名匹配的函数原型调用 dll 函数（如同 c# 函数）附加技巧：使用 chars...

99+

2024-05-14

c#
如何构建 Golang RESTful API，并实现 CRUD 操作？

通过创建 golang 项目并安装必要的包，我们可以构建一个功能齐全的 restful api。它使用 mysql 数据库进行 crud 操作：1. 创建和连接数据库；2. 定义数据结构...

99+

2024-05-14

go crud mysql git golang
c#怎么添加类文件

在c#中添加类文件的步骤：1. 创建新项目，2. 添加新类，3. 为类添加代码，4. 在另一个类中引用新类。using语句引用类文件所在的命名空间；new运算符创建类的新实例；点运算符访...

99+

2024-05-14

c#
使用 C++ 构建高性能服务器架构的最佳实践

遵循 c++++ 中构建高性能服务器架构的最佳实践可以创建可扩展、可靠且可维护的系统：使用线程池以重用线程，提高性能。利用协程减少上下文切换和内存开销，提升性能。通过智能指针和引用计数优...

99+

2024-05-14

c++ 高性能服务器架构数据访问
c#怎么添加字段

在 c# 中添加字段包括以下步骤：声明字段：在类或结构中使用字段类型字段名; 语法声明字段。访问修饰符：用于限制对字段的访问，如 private、public、protected 和...

99+

2024-05-14

c#