广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >css3的边框新增加的特性怎么使用
  • 837

0
分享到

css3的边框新增加的特性怎么使用

2024-04-02 19:04:59 837人浏览 独家记忆
摘要

本篇内容主要讲解“css3的边框新增加的特性怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3的边框新增加的特性怎么使用”吧!

本篇内容主要讲解“css3的边框新增加的特性怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3的边框新增加的特性怎么使用”吧!

css3边框新增加的特性有：border-radius、border-image、border-image-outset、border-image-repeat、border-image-slice、border-image-width等。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3的边框新增加的特性（属性）

属性描述CSS
border-radius设置或检索对象使用圆角边框。
border-bottom-left-radius设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数3
border-bottom-right-radius设置或检索对象的右下角圆角边框。3
border-top-left-radius定义左上角边框的形状。3
border-top-right-radius定义右上角边框的形状。3
border-image设置或检索对象的边框样式使用图像来填充。3
border-image-outset规定边框图像超过边框的量。3
border-image-repeat规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。3
border-image-slice规定图像边框的向内偏移。3
border-image-source规定要使用的图像，代替 border-style 属性中设置的边框样式。3
border-image-width规定图像边框的宽度。3
box-decoration-break规定行内元素被折行3
box-shadow向方框添加一个或多个阴影。3
box-reflect设置或检索对象的倒影3

border-image

CSS3中新增的边框属性，扩充了原盒子模型的功能，使得边框具备背景图片属性。此前，border仅仅具备宽度、颜色和风格属性.

实现边框背景图片属性，通常使用padding和background属性进行模拟，但是这样就为设置盒子的背景增加了难度

语法格式： 该语法为 CSS 缩写样式        

border-image：

　　         [border-image-source 图片来源 ]

　　　　 说明：          

　　　　　　设置或检索对象的边框样式使用图像路径。

　　　　　　指定一个图像用来替代border-style边框样式的属性。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。

　　　　　　对应的脚本特性为borderImageSource。

　　　　取值：

　　　　　　none： 无背景图片。

　　　　　　none： 无背景图片。

　　　　　　<url>： 使用绝对或相对地址指定图像。

　　　　　　<url>： 使用绝对或相对地址指定图像。

　   [ border-image-slice分割方法 ]

　　　　         说明：          

　　　　　　设置或检索对象的边框背景图的分割方式。

　　　　　　该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill。

　　　　　　对应的脚本特性为borderImageSlice。

　　　　取值：  

　　　　　　<number>： 用浮点数指定宽度。不允许负值。

　　　　　　<%>： 用百分比指定宽度。不允许负值。

[    

/ [ border-image-width边框宽度 ]? |        

　　　　 说明：          

　　　　　　设置或检索对象的边框厚度。

　　　　　　该属性用于指定使用多厚的边框来承载被裁剪后的图像。

　　　　　　该属性可省略，由外部的border-width来定义。

　　　　　　对应的脚本特性为borderImageWidth。

　　　　取值：  

　　　　　　<length>： 用长度值指定宽度。不允许负值。

　　　　　　<percentage>： 用百分比指定宽度。不允许负值。

　　　　　　<number>： 用浮点数指定宽度。不允许负值。

　　　　　　auto： 如果auto值被设置，则border-image-width采用与border-image-slice相同的值。

　　　　           注意:该值得大小不会累加到盒子模型之上，chrome会有3像素的大小，其余浏览器border的大小依然为0          

　　/ [border-image-outset 扩展方式 ]        

　　　　说明：  

　　　　　　置或检索对象的边框背景图的扩展。

　　　　　　该属性用于指定边框图像向外扩展所定义的数值，即如果值为10px，则图像在原本的基础上往外延展10px再显示。

　　　　　　对应的脚本特性为borderImageOutset。

　　　　取值：  

　　　　　　<length>： 用长度值指定宽度。不允许负值。

　　　　　　<number>： 用浮点数指定宽度。不允许负值。

]        

　　[ border-image-repeat重复方式 ]

　　　　         说明：        

　　　　　　设置或检索对象的边框图像的平铺方式。

　　　　　　该属性用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为         　　　　　　　stretch，则可省略不写。

　　　　　　对应的脚本特性为borderImageOutset。

　　　　           取值：  

　　　　　　stretch： 指定用拉伸方式来填充边框背景图。

　　　　　　repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。

　　　　　　round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果

　　　　　　space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。写本文档时尚无浏览器能看到该效果

CSS3 新增属性实例  

css3的边框新增加的特性怎么使用  

css3的边框新增加的特性怎么使用css3的边框新增加的特性怎么使用

1、  

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) no-repeat center  ;
        border-image-source:none;
    }
</style>
</head>
<body>
    <div></div>
</body>

2、

<style>
div{
    width:300px;
    height:300px;
    background:url(./shuaige.jpg) center no-repeat ;
    border-image-source:url(./border.png);
    border-image-width:27px;
    border-image-slice:27;
    border-image-outset:0px;
    border-image-repeat:stretch;
}
</style>
</head>
<body>
    <div>
    </div>
</body>

3、 

<style>
div{
    width:300px;
    height:300px;
    background:url(shuaige.jpg) no-repeat center;
    border-image-source:url(border.png);
    border-image-width:27px;
    border-image-slice:27;
    border-image-outset:0px;
    border-image-repeat:repeat;
}
</style>
</head>
<body>
    <div>
    </div>
</body>

4、

<style>
            div{
                width:300px;
                height:300px;
                background:url(shuaige.jpg) no-repeat center;
                border-image-source:url(border.png);
                border-image-width:27px;
                border-image-slice:27;
                border-image-outset:0px;
                border-image-repeat:round;
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>

5、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:27 fill;
        
        border-image-outset:0px;
        border-image-repeat:stretch;
    }
</style>
</head>
<body>
    <div>
    </div>
</body>

6、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:54;
        border-image-outset:0px;
        border-image-repeat:stretch;
    }
</style>
</head>
<body>
<div>
</div>
</body>

7、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:81;
        border-image-outset:0px;
        border-image-repeat:stretch;
    }
</style>
</head>
<body>
<div>
</div>
</body>

8、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:27;
        border-image-outset:154px;
        border-image-repeat:repeat;
    }
</style>
</head>
<body>
<div>
</div>
</body>

到此，相信大家对“css3的边框新增加的特性怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

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

--结束END--

本文标题: css3的边框新增加的特性怎么使用

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

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

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

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

下载Word文档
去做题
猜你喜欢
  • css3的边框新增加的特性怎么使用
    本篇内容主要讲解“css3的边框新增加的特性怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3的边框新增加的特性怎么使用”吧! ...
    99+
    2022-10-19
  • CSS3中的边框属性怎么使用
    这篇文章主要讲解了“CSS3中的边框属性怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3中的边框属性怎么使用”吧！ 　　css3边框 　　...
    99+
    2022-10-19
  • CSS3如何使用新增边框属性制作关门开门效果
    这篇文章主要介绍了CSS3如何使用新增边框属性制作关门开门效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。border: 宽度 类型 颜色...
    99+
    2022-10-19
  • React18新增特性released怎么使用
    本文小编为大家详细介绍“React18新增特性released怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“React18新增特性released怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。新...
    99+
    2023-06-30
  • React18新增特性released的使用
    目录新功能：Automatic Batching新功能：Transitions新的Suspense功能新的客户端和服务器Rendering APIsReact DOM ClientR...
    99+
    2022-11-13
  • CSS媒体查询新增的特性怎么使用
    这篇文章主要介绍了CSS媒体查询新增的特性怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS媒体查询新增的特性怎么使用文章都会有所收获，下面我们一起来看看吧。CSS @media 规范prefers-...
    99+
    2023-07-04
  • es6对象增加新的属性怎么使用
    今天小编给大家分享一下es6对象增加新的属性怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。es6对象增加新的属性是“...
    99+
    2023-07-04
  • CSS3中的新特性::target-text选择器怎么用
    这篇文章主要介绍了CSS3中的新特性::target-text选择器怎么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS3中的新特性::target-text选择器怎么用...
    99+
    2022-10-19
  • ES6新增的特性有哪些及怎么用
    这篇文章主要讲解了“ES6新增的特性有哪些及怎么用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“ES6新增的特性有哪些及怎么用”吧！理解ES6ECMAScr...
    99+
    2022-10-19
  • css3有哪些新增的背景属性及怎么用
    这篇“css3有哪些新增的背景属性及怎么用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“c...
    99+
    2022-10-19
  • CSS的border边框属性怎么使用
    这篇文章主要介绍“CSS的border边框属性怎么使用”，在日常操作中，相信很多人在CSS的border边框属性怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS的border边框属性怎么使用”的疑...
    99+
    2023-07-04
  • Vue3 style中新增的特性如何使用
    本文小编为大家详细介绍“Vue3 style中新增的特性如何使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue3 style中新增的特性如何使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。style新特...
    99+
    2023-07-06
  • HTML5的新特性怎么使用
    这篇“HTML5的新特性怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“HTML5的...
    99+
    2022-10-19
  • 怎么使用的新Java特性
    这篇文章主要讲解了“怎么使用的新Java特性”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么使用的新Java特性”吧！1 Try-with-resource 语句使用 try-catch ...
    99+
    2023-06-15
  • es6新加的特性是什么及怎么用
    这篇文章主要介绍“es6新加的特性是什么及怎么用”，在日常操作中，相信很多人在es6新加的特性是什么及怎么用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”es6新加的特性是什...
    99+
    2022-10-19
  • Vue3 style中新增的特性有哪些及怎么用
    三、插槽选择器默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以确切地将插槽内容作为选择器的目标：<style scoped> ...
    99+
    2023-05-14
    Vue3 style
  • 怎么用CSS3实现逐渐发光的方格边框
    今天小编给大家分享一下怎么用CSS3实现逐渐发光的方格边框的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起...
    99+
    2022-10-19
  • 使用border-radius属性怎么给元素添加圆角边框
    本篇文章为大家展示了使用border-radius属性怎么给元素添加圆角边框，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。border-radius:10px; border-radius: 5px...
    99+
    2023-06-08
  • CSS3中的新属性currentColor怎么用
    小编给大家分享一下CSS3中的新属性currentColor怎么用，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！     currentColor顾名思意就是“当前颜...
    99+
    2022-10-19
  • CSS3中的新属性object-view-box怎么使用
    这篇文章主要讲解了“CSS3中的新属性object-view-box怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3中的新属性object-v...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作